忽略mousemove上的子元素

我嘗試使用mousemove獲取相對於元素的鼠標位置。它工作正常，但是當鼠標懸停一個子元素時，座標是相對於這個孩子的。我想要相對於父div的鼠標位置，而不是孩子。忽略mousemove上的子元素

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是如何工作的。

我不能使用的mouseenter或隔日鼠標僅控制了，因爲我想這是觸摸友好（由touchmove替代鼠標移動）。

任何想法？

來源

2012-09-22 Julian

在你上面的代碼爲mousemove，請嘗試使用下面的moveX和moveY：

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

此外，你忘了# in $('scene')。

這裏是一個更新的JSFiddle。

來源

2012-09-22 20:16:42 prashanth

使用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-22 19:12:02 danijar

鼠標座標必須相對於主div，而不是頁面。我認爲event.offsetX是唯一有效的方法來獲得這種情況下的座標 – Julian

他們是，如果你減去主要的div的偏移量。我正在小提琴上工作。等一下。 – danijar

謝謝，但它沒有回答我的問題。在你的例子中，孩子的位置相對於父div的鼠標位置更新，這不是我想要的。我只想獲得鼠標相對於父div的位置，即使鼠標懸停在一個孩子身上（如果孩子不存在）。 – Julian

對於未來的參考，你可以簡單地創建一個絕對股利，並將其放置在上面，設置的z-index和它固定在頂部和左側包含了孩子的父母，然後改變你的代碼，以使事件處理程序在頂層的輸入圖層的選擇器上運行。將光標上的高度和寬度值分割爲X和Y，它位於中心。

來源

2016-09-22 06:49:59 greatbow

忽略mousemove上的子元素

回答

相關問題