Question

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

我遇到了Firefox的问题，jQuery触发的事件不起作用;但原生的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。

（Firefox）Javascript mousemove与jQuery mousemove不同

1 个答案: