2012-09-22 24 views
7

私はmousemoveを使用して要素に対してマウスの位置を取得しようとしています。 これは問題なく動作しますが、マウスが子要素にマウスポインタを置くと、座標はこの子を基準にしています。私はマウスの位置を子divではなく親divに相対的にしたい。mousemoveで子要素を無視する

たとえば、this 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を置き換えることによって)親しみやすいようにしたいので、マウスセンターまたは他のすべてのマウスコントロールを使用することはできません。

アイデア?

答えて

5

mousemoveのためのあなたの上記のコードでは、moveXmoveYために、以下のものを使用してみてください:

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

また、あなたが忘れてしまいました#$('scene')

ここにはJSFiddleが更新されています。

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/と、このバージョンを見るような場合)

+0

マウスの座標は、ページではなくメインdivを基準にする必要があります。 私はevent.offsetXがこのケースで座標を取得するための唯一の有効な方法だと思っています – Julian

+0

メインdivのオフセットを差し引くと、それはそうです。私はフィドルに取り組んでいます。ちょっと待って。 – danijar

+0

ありがとうございますが、私の質問には答えません。 あなたの例では、子の位置は親のdivに対するマウスの位置で更新されますが、これは私が望むものではありません。 マウスをマウスの上に置いても親のdivに相対的なマウスの位置を取得したいだけです(子が存在しない場合など)。 – Julian

0

将来参照するには、絶対divを作成して上に配置し、Z-インデックスを設定して、子を含む親の左上と右に固定してから、イベントを作成するコードを変更しますハンドラは、上の入力レイヤーのセレクタで実行されます。カーソルの高さと幅の値をXとYに分割し、中央に表示します。

関連する問題