2017-12-14
304
На компьютерах под управлением Windows и Linux есть специальные клавиши Alt, Shift и Ctrl. На Mac есть ещё одна специальная клавиша: Cmd, которой соответствует свойство metaKey.
В большинстве случаев там, где под Windows/Linux используется Ctrl, на Mac используется Cmd. Там, где пользователь Windows нажимает Ctrl+Enter или Ctrl+A, пользователь Mac нажмёт Cmd+Enter или Cmd+A, и так далее, почти всегда Cmd вместо Ctrl.
Поэтому, если мы хотим поддерживать сочетание Ctrl+click или другие подобные, то под Mac имеет смысл использовать Cmd+click. Пользователям Mac это будет гораздо комфортнее.
Более того, даже если бы мы хотели бы заставить пользователей Mac использовать именно Ctrl+click – это было бы затруднительно. Дело в том, что обычный клик с зажатым Ctrl под Mac работает как правый клик и генерирует событие oncontextmenu, а вовсе не onclick, как под Windows/Linux.
Решение – чтобы пользователи обоих операционных систем работали с комфортом, в паре с ctrlKey нужно обязательно использовать metaKey.
В JS-коде это означает, что для удобства пользователей Mac нужно проверять if (event.ctrlKey || event.metaKey).
|
|
|
Координаты в окне: clientX/Y
Все мышиные события предоставляют текущие координаты курсора в двух видах: относительно окна и относительно документа.
Пара свойств clientX/clientY содержит координаты курсора относительно текущего окна.
При этом, например, если ваше окно размером 500x500, а мышь находится в центре, тогда и clientX и clientY будут равны 250.
Можно как угодно прокручивать страницу, но если не двигать при этом мышь, то координаты курсора clientX/clientY не изменятся, потому что они считаются относительно окна, а не документа.
Проведите мышью над полем ввода, чтобы увидеть clientX/clientY:
<input onmousemove="this.value = event.clientX+':'+event.clientY">
В той же системе координат работает и метод elem.getBoundingClientRect(), возвращающий координаты элемента, а также position:fixed.
Относительно документа: pageX/Y
Координаты курсора относительно документа находятся в свойствах pageX/pageY.
Так как эти координаты – относительно левого-верхнего узла документа, а не окна, то они учитывают прокрутку. Если прокрутить страницу, а мышь не трогать, то координаты курсора pageX/pageY изменятся на величину прокрутки, они привязаны к конкретной точке в документе.
В IE8- этих свойств нет, но можно получить их способом, описанным в конце главы.
Проведите мышью над полем ввода, чтобы увидеть pageX/pageY (кроме IE8-):
<input onmousemove="this.value = event.pageX+':'+event.pageY">
В той же системе координат работает position:absolute, если элемент позиционируется относительно документа.
Устарели: x, y, layerX, layerY
Некоторые браузеры поддерживают свойства event.x/y, event.layerX/layerY.
Эти свойства устарели, они нестандартные и не добавляют ничего к описанным выше. Использовать их не стоит.
|
|
|
Особенности IE8-
Двойной клик
Все браузеры, кроме IE8-, генерируют dblclick в дополнение к другим событиям.
То есть, обычно:
· mousedown (нажал)
· mouseup+click (отжал)
· mousedown (нажал)
· mouseup+click+dblclick (отжал).
IE8- на втором клике не генерирует mousedown и click.
Получается:
· mousedown (нажал)
· mouseup+click (отжал)
· (нажал второй раз, без события)
· mouseup+dblclick (отжал).
Поэтому отловить двойной клик в IE8-, отслеживая только click, нельзя, ведь при втором нажатии его нет. Нужно именно событие dblclick.
