Работая с мышью в Javascript, я иногда встречал следующие атрибуты событий:
Мне интересно, как в целом выглядит их кросс-браузерная совместимость, поскольку я нашел только обрывки информации, которые пытаюсь собрать воедино.
Вот как это делает jQuery:
// Calculate pageX/Y if missing and clientX/Y available
if ( event.pageX == null && event.clientX != null ) {
var doc = document.documentElement, body = document.body;
event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
event.pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0);
}
Тестирование pageX (или pageY) или вычисление его из clientX и scrollLeft и clientLeft
Вы должны полагаться только на client*, movement*, screen*. В веб-документах MDN их совместимость с большинством основных браузеров неизвестна, но их следует рассматривать как поддержку (иначе во многих случаях jQuery не работает).
page* не поддерживаются в Firefox, но их можно вычислить из приведенных выше свойств. Вот ссылка на реализацию jQuery .
Другие свойства, offset*, x, y, layer*, не являются стандартными, и вам следует прекратить их использование, если вы хотите написать код с высоким уровнем совместимости.
Я также сделал сообщение в блоге, чтобы обобщить все свойства/методы, связанные с размерами или положением, в Javascript здесь. Любой желающий может посмотреть, будет ли это полезно.
