(Firefox) Javascript鼠标移动不一样的jQuery鼠标移动

(Firefox) Javascript mousemove not the same as jQuery mousemove

本文关键字：移动 鼠标 jQuery 不一样 Firefox Javascript      更新时间：2023-09-26

我已经创建了一个jquery小部件，允许我将它附加到画布上并记录用户创建的绘图。

我有一个问题与Firefox，其中事件触发的jQuery不工作;但是原生javascript事件可以正常工作。

问题的JSFiddle: http://jsfiddle.net/sk6N5/8/

我可以在canvas1中画画，但不能在canvas2中画画。我不知道为什么这幅画有点不准确;但在我自己的小部件中，它按预期工作(所以这无关紧要)。

这是jQuery的一个bug还是我必须以另一种方式使用它?(我真的想使用jQuery，因为事件命名空间)。

我的javascript: 

document.getElementById("canvas1").addEventListener("mousemove", function(event){
    self = this;
    draw(event, self);
});
$("#canvas2").on("mousemove", function(event){
    self = this;
    draw(event, self);
});
function draw(ev, canvas){
    var x, y;
     if (ev.layerX || ev.layerX == 0) {
        x = ev.layerX;
        y = ev.layerY;
    } else if (ev.offsetX || ev.offsetX == 0) { 
        x = ev.offsetX;
        y = ev.offsetY;
    }
    var context = canvas.getContext('2d');
    console.log(ev, x, y);
    if (x === undefined || y === undefined) return;
    context.fillStyle = "rgb(0,255,255)";
    context.lineTo(x, y);
    context.stroke();
}

问题

在jQuery中，事件没有layerX和layerY属性，因为$.event.props.layerX和$.event.props.layerY被删除了(之前只在支持event.layerX和event.layerY的浏览器上工作)。

他们只有offsetX和offsetY属性在浏览器上支持他们。曾经有一个请求，希望Firefox也能使用它们，但由于性能原因被关闭为非修复。

<<p> 解决方案/strong>
  • 从event.originalEvent读取layerX和layerY

  • 使用jQuery手动计算偏移量:

    if(typeof event.offsetX === "undefined" || typeof event.offsetY === "undefined") {
   var targetOffset = $(event.target).offset();
   event.offsetX = event.pageX - targetOffset.left;
   event.offsetY = event.pageY - targetOffset.top;
}

  • 用JavaScript手动计算偏移量。要查找目标元素的位置，您可以使用以下代码:

相关文章：