В этой статье речь пойдет о Javascript событиях мыши. Эти события являются очень важными в Javascript и используются на каждом шагу. Сначала я расскажу вам о всех стандартных событиях связанных с мышкой: mousedown, mouseup, click, dblclick, mousemove и, наконец, mouseover и mouseout.
События mousedown, mouseup и click
Когда пользователь кликает на элемент, то срабатывает не меньше чем 3 события мыши в таком порядке:
В основном события mousedown и mouseup более полезны нежели click. Иногда пользователь кликает мышкой, но событие click не срабатывает.
Предположим, что пользователь нажал кнопку на ссылке, потом отвел курсор куда-то в сторону и отпустил кнопку. Ссылка обработала только mousedown событие. Также можно возпроизвести и противоположную ситуацию когда пользователь нажимает кнопку мыши, а потом наводит курсор на ссылку и отпускает кнопку. Срабатывает только mouseup событие. В остальных случаях срабатывает click.
Так или иначе, эта проблема возникает только если Вы сами этого захотите Вы должны зарегистрировать обработчики событий onmousedown/up, но в большинстве случаев хватает события click.
Помните, что если вы используете alert'ы, то браузер может запутаться и потерять порядок выполняющихся событий и количество их вызовов.
Событие dblclick (двойной клик)
Событие dblclick используется намного реже всех остальных событий мыши. Если Вы всетаки используете его, убедитесь в том, что не используете обработчики событий onclick и ondblclick для одного и того же HTML элемента. Определить что сделал пользователь практически невозможно в таком случае.
Когда пользователь делает двойной клик на элементе сначала срабатывает событие click и только потом dblclick. Использование alert сообщений здесь также крайне опасно.
Mousemove событие
Событие mousemove работает нормально, но Вы должны помнить, что обработка такого рода событий может занимать некоторое количество времени. Событие mousemove срабатывает когда пользователь передвигает курсор мыши на один пиксель. Казалось бы ничего особенного не происходит, но внутри есть сложные функции, процес выполнение которых занимает длительный промежуток времени. Это может привести к нестабильной работе сайта. Поэтому лучше всего использовать обработчик события onmousemove, только там, где это действительно нужно, и обязательно удалять его в будущем.
Mouseover и mouseout события
Давайте рассмотрим небольшой пример. Попробуйте поводить курсор мышки поверх элементов с разным фоном. Элемент 1 должен слегка мигать при наведении на него курсором - это срабатывает событие mouseover.
DEMO
Тем не менее, как Вы видите, это событие срабатывает и при наведении курcора мыши на элемент№2 и даже span.
Причина такого поведение в том, что событие установленное на первый элементы также применяется к его дочерним нодам. Все предельно ясно, но проблема возникает тогда, когда нам надо совершить какое-то действие при переходе курсора мышки, например, от элемента span к элементу №2.
"Откуда пришла мышь?" или свойства relatedTarget, fromElement и toElement
Ребята из W3C добавили свойство relatedTarget для событий mouseover и mouseout. Свойство содержит в себе элемент от которого пришел курсор мышки в случае mouseover и элемент к которому перешла мышь в случае mouseout.
Microsoft создали два ствойства чтобы хранить эту информацию:
Кроссбраузерный код
И так если Вы хотите знать откуда пришла мышка используя событие mouseover, ипользуйте следующий скрипт:
В случае ипользования события mouseout (элемент, к которому движется курсор):
Mouseenter и mouseleave
Microsoft предлагает другой способ решения проблемы. Они создали 2 новых события mouseenter и mouseleave. Эти события имеют такое же поведение как mouseover и mouseout. Единственно отличие - это то, что события не "перепрыгивают" на дочерние элементы. Это очень хорошо решает нашу проблему, представленную в примере.
Ну вот и все о чем я хотел рассказать касательно Javascript событий мыши.
События mousedown, mouseup и click
Когда пользователь кликает на элемент, то срабатывает не меньше чем 3 события мыши в таком порядке:
Цитата
mousedown, пользователь нажал кнопку мыши на элементе
mouseup, пользователь отпустил кнопку мыши на элементе
click, обнаружены события mousedown и mouseup на элементе
mouseup, пользователь отпустил кнопку мыши на элементе
click, обнаружены события mousedown и mouseup на элементе
В основном события mousedown и mouseup более полезны нежели click. Иногда пользователь кликает мышкой, но событие click не срабатывает.
Предположим, что пользователь нажал кнопку на ссылке, потом отвел курсор куда-то в сторону и отпустил кнопку. Ссылка обработала только mousedown событие. Также можно возпроизвести и противоположную ситуацию когда пользователь нажимает кнопку мыши, а потом наводит курсор на ссылку и отпускает кнопку. Срабатывает только mouseup событие. В остальных случаях срабатывает click.
Так или иначе, эта проблема возникает только если Вы сами этого захотите Вы должны зарегистрировать обработчики событий onmousedown/up, но в большинстве случаев хватает события click.
Помните, что если вы используете alert'ы, то браузер может запутаться и потерять порядок выполняющихся событий и количество их вызовов.
Событие dblclick (двойной клик)
Событие dblclick используется намного реже всех остальных событий мыши. Если Вы всетаки используете его, убедитесь в том, что не используете обработчики событий onclick и ondblclick для одного и того же HTML элемента. Определить что сделал пользователь практически невозможно в таком случае.
Когда пользователь делает двойной клик на элементе сначала срабатывает событие click и только потом dblclick. Использование alert сообщений здесь также крайне опасно.
Mousemove событие
Событие mousemove работает нормально, но Вы должны помнить, что обработка такого рода событий может занимать некоторое количество времени. Событие mousemove срабатывает когда пользователь передвигает курсор мыши на один пиксель. Казалось бы ничего особенного не происходит, но внутри есть сложные функции, процес выполнение которых занимает длительный промежуток времени. Это может привести к нестабильной работе сайта. Поэтому лучше всего использовать обработчик события onmousemove, только там, где это действительно нужно, и обязательно удалять его в будущем.
Код
element.onmousemove = doSomething;
// позже
element.onmousemove = null;
// позже
element.onmousemove = null;
Mouseover и mouseout события
Давайте рассмотрим небольшой пример. Попробуйте поводить курсор мышки поверх элементов с разным фоном. Элемент 1 должен слегка мигать при наведении на него курсором - это срабатывает событие mouseover.
DEMO
Тем не менее, как Вы видите, это событие срабатывает и при наведении курcора мыши на элемент№2 и даже span.
Причина такого поведение в том, что событие установленное на первый элементы также применяется к его дочерним нодам. Все предельно ясно, но проблема возникает тогда, когда нам надо совершить какое-то действие при переходе курсора мышки, например, от элемента span к элементу №2.
"Откуда пришла мышь?" или свойства relatedTarget, fromElement и toElement
Ребята из W3C добавили свойство relatedTarget для событий mouseover и mouseout. Свойство содержит в себе элемент от которого пришел курсор мышки в случае mouseover и элемент к которому перешла мышь в случае mouseout.
Microsoft создали два ствойства чтобы хранить эту информацию:
Цитата
fromElement - относится к элементу от которого пришла мышь.
toElement - к элементу к которому пришла мышь.
toElement - к элементу к которому пришла мышь.
Кроссбраузерный код
И так если Вы хотите знать откуда пришла мышка используя событие mouseover, ипользуйте следующий скрипт:
Код
function doSomething(e) {
if (!e) var e = window.event;
var relTarg = e.relatedTarget || e.fromElement;
}
if (!e) var e = window.event;
var relTarg = e.relatedTarget || e.fromElement;
}
В случае ипользования события mouseout (элемент, к которому движется курсор):
Код
function doSomething(e) {
if (!e) var e = window.event;
var relTarg = e.relatedTarget || e.toElement;
}
if (!e) var e = window.event;
var relTarg = e.relatedTarget || e.toElement;
}
Mouseenter и mouseleave
Microsoft предлагает другой способ решения проблемы. Они создали 2 новых события mouseenter и mouseleave. Эти события имеют такое же поведение как mouseover и mouseout. Единственно отличие - это то, что события не "перепрыгивают" на дочерние элементы. Это очень хорошо решает нашу проблему, представленную в примере.
Ну вот и все о чем я хотел рассказать касательно Javascript событий мыши.