13

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

有任何想法吗？

4

3 回答 3

7

在上面的代码中mousemove，尝试使用以下 formoveX和moveY：

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

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

这是一个更新的JSFiddle。

于 2012-09-22T20:16:42.553 回答
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/）

于 2012-09-22T19:12:02.737 回答
2

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

于 2016-09-22T06:49:59.437 回答