13

mousemoveを使用して、要素に対するマウスの位置を取得しようとしています。正常に動作しますが、マウスが子要素にカーソルを合わせると、座標はこの子に相対的です。子ではなく、親divに対するマウスの位置が必要です。

たとえば、このJSFiddleを参照してください。

var object = document.getElementsByClassName('object'),
scene = document.getElementById('scene');

function initMove() {

for(var i=0; i<object.length; i++) {

  object[i].addEventListener("mousemove", function(event) {
    //event.stopPropagation();
    return false;
  }, false);
}

scene.addEventListener("mousemove", function (event) {
  //event.stopPropagation();
  //event.currentTarget;
  moveX = event.offsetX;
  moveY = event.offsetY;
  console.log(moveX + ' + ' + moveY);
  }, false);

}

function init() {
  initMove();
  document.onselectstart = function(){ return false; }
};

init();​

子を追加event.stopPropagation()してもデータは返されません。そして、私はどのようにevent.currentTarget機能するのかわかりません。

（mousemoveをtouchmoveに置き換えて）タッチフレンドリーにしたいので、mouseenterまたは他のすべてのマウスのみのコントロールを使用することはできません。

何か案は？

4

3 に答える 3

7

上記ののコードでmousemove、次のコードを使用してみてmoveXくださいmoveY。

moveX = event.clientX - scene.offsetLeft;
moveY = event.clientY - scene.offsetTop;

また、あなたは忘れ#ました$('scene')。

これが更新されたJSFiddleです。

于 2012-09-22T20:16:42.553 に答える
2

mousemoveおよびカーソル座標を使用して、グローバルマウス位置を取得します。次に、これから子要素のオフセットを減算します。

var scene = $('#scene');
scene.mousemove(function(e){
    var offsetX = e.pageX - scene.offset().left;
    var offsetY = e.pageY - scene.offset().top;
});

スクリプト全体は、シーン内のオブジェクトに移動できる次のテスト済みの例のようになります。

jQuery(document).ready(function(){

    var scene = $('#scene');
    var object = $('.object');

    scene.mousemove(function(e){
        // get offset of object relative to scene
        var offsetX = e.pageX - scene.offset().left;
        var offsetY = e.pageY - scene.offset().top;

        // grab object in it's center (optional)
        offsetX -= object.width() / 2;
        offsetY -= object.height() / 2;

        // don't left to object out of the scene
        var maxX = scene.width() - object.width();
        var maxY = scene.height() - object.height();

        if(0 > offsetX) offsetX = 0;
        else if(offsetX > maxX) offsetX = maxX ;

        if(0 > offsetY) offsetY = 0;
        else if(offsetY > maxY) offsetY = maxY;

        // delete decimals
        offsetX = Math.floor(offsetX);
        offsetY = Math.floor(offsetY);

        // debug information
        object.html('X: ' + offsetX + '<br>Y: ' + offsetY);

        // move object
        object.css('left', offsetX).css('top', offsetY);
    });

});

これはあなたがやりたかったことですか？これがあなたのフィドルです：http：//jsfiddle.net/Bp3wH/9/（光学的な改善のみが施されたこのバージョンをご覧になりたい場合はhttp://jsfiddle.net/Bp3wH/11/）

于 2012-09-22T19:12:02.737 に答える
2

後で参照できるように、絶対divを作成して上部に配置し、z-indexを設定して、子を含む親の左上に固定してから、コードを変更して、セレクターでイベントハンドラーを実行することができます。上の入力レイヤー用。高さと幅の値をカーソル上でXとYに分割すると、中央に配置されます。

于 2016-09-22T06:49:59.437 に答える