(Firefox)Javascript mousemove与jQuery mousemove不同 [英] (Firefox) Javascript mousemove not the same as jQuery mousemove

问题描述

我创建了一个jquery窗口小部件，该窗口小部件使我可以将其附加到画布上并记录用户创建的图形.

I have created a jquery widget that allows me to attach it to a canvas and record the drawings the user creates.

我在Firefox上遇到问题，由jQuery触发的事件不起作用；但是原生的javascript事件正在运行.

I have a problem with Firefox where the event fired by jQuery does not work; but the native javascript event is working.

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

A JSFiddle of the problem: http://jsfiddle.net/sk6N5/8/

我可以在canvas1中绘制，但不能在canvas2中绘制. 我不知道为什么画图有些偏离.但是在我自己的窗口小部件中，它按预期方式工作(所以没关系).

I am able to draw in canvas1 but not in canvas2. I don't know why the drawing is a bit off; but in my own widget it's working as expected(so that doesn't matter).

是jQuery中的错误还是必须以其他方式使用它? (由于事件的命名空间，我真的很想使用jQuery.)

Is that a bug in jQuery or do I have to use it in another way? (I really want to use jQuery because of the event namespacing).

我的JavaScript:

My 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是

In jQuery, events don't have layerX and layerY properties because $.event.props.layerX and $.event.props.layerY were removed (and before only worked on browsers that support event.layerX and event.layerY).

并且它们仅在支持它们的浏览器中具有offsetX和offsetY属性.也有一张票证也可以使它们适用于Firefox，但由于性能原因被作为wontfix关闭原因.

And they only have offsetX and offsetY properties on browsers that supports them. There was a ticket to make them available for Firefox too, but was closed as wontfix because of performance reasons.

解决方案

• 从event.originalEvent
读取layerX和layerY

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

• Read layerX and layerY from event.originalEvent

• Calculate offsets manually with 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手动计算偏移量.要查找目标元素的位置，您可以使用此代码.

这篇关于(Firefox)Javascript mousemove与jQuery mousemove不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！