(火狐) Javascript mousemove与jQuery mousemove不同
提问于 2014-03-28 06:58:37
我已经创建了一个jquery小部件，它允许我将它附加到画布上并记录用户创建的绘图。
我对火狐有一个问题，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();
}
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-03-28 08:23:06
问题
在jQuery中，事件没有layerX和layerY属性，因为$.event.props.layerX和$.event.props.layerY是删除 (以前只在支持event.layerX和event.layerY的浏览器上工作)。
而且它们只在支持它们的浏览器上具有offsetX和offsetY属性。火狐也可以使用一张票，但由于性能原因，它被关闭了。
解决方案
- 从
layerX和layerY中读取event.originalEvent - 使用jQuery手动计算偏移量： 如果( event.offsetX ===的类型为“未定义的”，event.offsetY ===的“未定义”){ var targetOffset = $(event.target).offset()；event.offsetX = event.pageX - targetOffset.left；event.offsetY = event.pageY - targetOffset.top；}
- 用JavaScript手动计算偏移量。要查找目标元素的位置，可以使用这段代码。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22716333
复制
腾讯云开发者
