Вернуть координаты щелчка мышью на холсте HTML5, используя события мыши Javascript?

Question

См. Код на этом сайте

Я хочу вернуть относительные координаты щелчка мышью / перемещения относительно холста html5. Что означает приведенный ниже код?

if ( event.layerX ||  event.layerX == 0) { // Firefox
            mouseX = event.layerX ;
            mouseY = event.layerY;
} else if (event.offsetX || event.offsetX == 0) { // Opera
            mouseX = event.offsetX;
            mouseY = event.offsetY;
}

layerX работает во всех браузерах, кроме Opera. offsetX работает во всех браузерах, кроме Firefox

Итак, что мы имеем в виду, если либо event.layerX ИЛИ event.layerY равен 0 ... Я имею в виду, что event.layerX возвращает относительные координаты щелчка мышью w.r.t canvas. Так как это имеет смысл?

Answer 1

Лучше всего такой код:

if ( event.offsetX == null ) { // Firefox
   mouseX = event.originalEvent.layerX;
   mouseY = event.originalEvent.layerY;
} else {                       // Other browsers
   mouseX = event.offsetX;
   mouseY = event.offsetY;
}

Это коротко, правильно и

event.layerX и event.layerY не работают и не рекомендуются в WebKit. Они будут сняты с двигателя в ближайшее время.

Answer 2

Для координат мыши (123,12) event.layerX || event.layerX == 0 даст нам TRUE в первой части оператора (event.layerX), а вторая (event.layerX == 0) не будет проверена.

Если event.layerX равен undefined (т. Е. Мы используем Opera), первая часть event.layerX || event.layerX == 0 даст нам FALSE, а вторая не будет проверена.

Но есть еще одинвозможность.Координаты мыши могут быть (0, 123), и первая часть event.layerX || event.layerX == 0 даст нам ЛОЖЬ, в то время как эти координаты совершенно верны.Вот почему есть вторая часть event.layerX == 0, которая возвращает TRUE, поэтому оператор if будет вычислен в конце концов.