(Firefox) Javascript mousemove отличается от jQuery mousemove

Question

(Firefox) Javascript mousemove отличается от jQuery mousemove

0

Я создал виджет 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();
}

Kristian Barrett 28 март 2014, в 16:52

Источник

Теги:

javascript

jquery

1 ответ

Ещё вопросы

Oriol · Accepted Answer · 2014-03-28T14-08-00.000Z

проблема

В jQuery события не имеют свойств layerX и layerY потому что были удалены $.event.props.layerX и $.event.props.layerY (и до того, как они работали только в браузерах, поддерживающих event.layerX и event.layerY).

И у них есть только свойства offsetX и offsetY в браузерах, которые их поддерживают. Был билет, чтобы сделать их доступными для 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. Чтобы найти позицию целевого элемента, вы можете использовать этот код.