忽略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上的子元素

回答

相关问题