Question

我尝试使用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）。

有什么想法吗？

Answer 1

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

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

另外，您忘记了#中的$('scene')。

以下是更新的JSFiddle。

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

Answer 3

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

忽略mousemove上的子元素

3 个答案: