javascript - (Firefox) Javascript mousemove 与 jQuery mousemove 不同

Question

我创建了一个 jquery 小部件，它允许我将其附加到 Canvas 并记录用户创建的绘图。

我在使用 Firefox 时遇到问题，jQuery 触发的事件不起作用；但 native JavaScript 事件正在运行。

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

我可以在canvas1中绘图，但不能在canvas2中绘图。不知道为什么画的有点不对劲；但在我自己的小部件中，它按预期工作(所以这并不重要)。

这是 jQuery 中的错误还是我必须以其他方式使用它？ (由于事件命名空间，我真的很想使用 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();
}

Answer 1

问题

在 jQuery 中，事件没有 layerX和layerY属性因为 $.event.props.layerX和$.event.props.layerY是removed (之前仅适用于支持 event.layerX 和 event.layerY 的浏览器)。

他们只有 offsetX和offsetY支持它们的浏览器上的属性。有a ticket使它们也适用于 Firefox，但由于性能原因被关闭为 wontfix。

解决方案

• 阅读 layerX和layerY来自event.originalEvent

• 使用 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 手动计算偏移量。要查找目标元素的位置，您可以使用 this code .