忽略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或其他所有鼠标只控制,因为我希望它是触摸友好的(通过touchmove替换mousemove).

有任何想法吗？

Answer 1

在你上面的代码mousemove,请尝试使用以下的moveX和moveY:

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

而且,你忘记#了$('scene').

这是一个更新的JSFiddle.