在div中获取鼠标位置?

IT技术 javascript jquery canvas
2021-02-27 02:52:05

可能的重复:
相对于 div 的
鼠标位置在画布中使用 javascript 获取鼠标位置

如何在固定大小但具有自动边距的画布中获取鼠标的位置?

我不能固定它的位置,也不能只使用页面上的常规鼠标位置。

这段代码完美运行:

mouseX = e.pageX - div.offsetLeft;
mouseY = e.pageY - div.offsetTop;
3个回答

使用jQuery:

var divPos = {};
var offset = $("#divid").offset();
$(document).mousemove(function(e){
    divPos = {
        left: e.pageX - offset.left,
        top: e.pageY - offset.top
    };
});
@charles - jQuery 事件对象pageXpageY属性是标准化的。
2021-04-24 02:52:05
MDN 说pageX不是标准的,不应该使用。developer.mozilla.org/en-US/docs/Web/API/UIEvent/pageX 例如,我在使用 foreignObject 时遇到了一些问题。
2021-05-03 02:52:05
使用getBoundingClientRect代替,addEventListener您将不需要 jquery::: var offset = document.querySelector('#divid').getBoundingClientRect(); document.addEventListener('mousemove', function(e) { var pos = { left: e.pageX - offset.left, top: e.pageY - offset.top } } ...未尝试但应该可以工作
2021-05-06 02:52:05
不使用 jQuery 怎么样
2021-05-07 02:52:05
@bryan - 我确信不用 jQuery 就可以完成,但这会非常复杂
2021-05-12 02:52:05

使用event.layerXevent.layerY获取鼠标相对于当前元素的位置:

$('#canvas').mousemove(function(e){
  var mousePos = {'x': e.layerX, 'y': e.layerY};
});
还应该提到的是,这会导致一些严重的问题,因为通过简单的手腕轻弹可以轻松更改图层的定义,从而更改图层 X 和图层 Y。
2021-04-30 02:52:05
这是一个很酷的功能,可惜它已被弃用。
2021-05-02 02:52:05
@blex 它没有被弃用,它是非标准的:developer.mozilla.org/en-US/docs/Web/API/UIEvent/layerX
2021-05-08 02:52:05
来自 MDN:“此功能是非标准的,不在标准轨道上。不要在面向 Web 的生产站点上使用它:它不适用于每个用户。”
2021-05-19 02:52:05

取自 jQuery 站点:Jquery 教程站点

$(document).mousemove(function(e){
      $('#status').html(e.pageX +', '+ e.pageY);
   }); 

注意:固定语法

因为pageXpageY与容器无关。
2021-04-22 02:52:05
为什么这被降价了?
2021-04-28 02:52:05