忽略 mousemove 上的子元素答案

【问题标题】：Ignoring child elements on mousemove忽略 mousemove 上的子元素
【发布时间】：2012-09-22 19:00:07
【问题描述】：

我尝试使用 mousemove 获取鼠标相对于元素的位置。它工作得很好，但是当鼠标悬停在一个子元素上时，坐标是相对于这个子元素的。我想要鼠标相对于父 div 的位置，而不是子元素。

例如，请参阅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 是如何工作的。

我不能使用 mouseenter 或其他所有仅鼠标控件，因为我希望它是触摸友好的（通过用 touchmove 替换 mousemove）。

有什么想法吗？

【问题讨论】：

标签： javascript mousemove mouse-position

【解决方案1】：

在mousemove 的上述代码中，尝试对moveX 和moveY 使用以下代码：

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/）

【讨论】：

鼠标坐标必须相对于主 div，而不是页面。我认为 event.offsetX 是在这种情况下获得坐标的唯一有效方法
它们是，如果你减去主 div 的偏移量。我正在制作小提琴。等一下。
谢谢，但它并没有回答我的问题。在您的示例中，子位置使用鼠标相对于父 div 的位置进行更新，这不是我想要的。我只想获取鼠标相对于父 div 的位置，即使鼠标悬停在孩子身上（比如孩子不存在）。
输出文本不是这样说的吗？我只是让对象随光标移动。你不必使用我所有的台词。
我的问题不完整。我不能在我的代码中使用 event.pageX，因为它总是会返回事件相对于整个文档的坐标。我需要相对于场景的坐标，这就是我使用 event.offsetX 的原因。无论如何，谢谢，即使我从不要求对象跟随光标...，您的代码也可以工作

【解决方案3】：

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

【讨论】：