忽略子元素的mousemove事件

Question

我尝试使用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 是如何工作的。

我不能使用 mouseenter 或其他仅适用于鼠标的控件，因为我希望这个功能对触摸屏友好（通过将 mousemove 替换为 touchmove）。

有何建议？

- Julian

Answer 1

在您上面的mousemove代码中，尝试使用以下内容来代替moveX和moveY：

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

另外，你在$('scene')中忘记了#。

这里是更新的JSFiddle链接。

- prashanth

Answer 2

为了以后参考，你可以简单地创建一个绝对定位的 div 并将其置于顶部，设置 z-index 并固定在包含子元素的父级上的左侧，然后更改您的代码，使事件处理程序在最上层的输入图层上运行。将光标的高度和宽度值拆分为 X 和 Y，使其位于中心。

- user5222215

Answer 3

使用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);
    });

});

这是您想要做的吗？这是您的fiddle：http://jsfiddle.net/Bp3wH/9/（如果您只想查看具有光学改进的版本，请参见http://jsfiddle.net/Bp3wH/11/）

- danijar

---

鼠标坐标必须相对于主div而不是页面。我认为event.offsetX是在这种情况下获取坐标的唯一有效方法。 - Julian

谢谢，但这并没有回答我的问题。 在你的例子中，子元素位置是根据鼠标相对于父级div的位置进行更新的，这不是我想要的。我只想获取鼠标相对于父级div的位置，即使鼠标悬停在子元素上（就像子元素不存在一样）。 - Julian

输出文本不是这么说的吗？我只是让对象随着光标移动。你不必使用我所有的行。 - danijar

如果我删除你代码中移动对象的部分，它就可以工作了。不幸的是，我真的需要一种使用“场景”作为事件而不是文档来映射坐标的方法。 - Julian

我的问题不完整。我不能在我的代码中使用event.pageX，因为它总是返回相对于整个文档的事件坐标。我需要相对于场景的坐标，这就是为什么我使用了event.offsetX。无论如何，谢谢你的代码，即使我从未要求对象跟随光标... - Julian