（Firefox）Javascript mousemove與jQuery mousemove不一樣

我創建了一個jquery小部件，它允許我將它附加到畫布上並記錄用戶創建的繪圖。（Firefox）Javascript mousemove與jQuery mousemove不一樣

我有一個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(); 
}

來源

2014-03-28 Kristian Barrett

問題

在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。

來源

2014-03-28 16:23:06 Oriol

（Firefox）Javascript mousemove與jQuery mousemove不一樣

回答

相關問題