2017-12-14
364
Одно действие может вызывать несколько событий.
Например, клик вызывает сначала mousedown при нажатии, а затем mouseup и click при отпускании кнопки.
В тех случаях, когда одно действие генерирует несколько событий, их порядок фиксирован. То есть, обработчики вызовутся в порядке mousedown → mouseup → click.
Кликните по кнопке ниже и вы увидите, какие при этом происходят события. Попробуйте также двойной клик.
На тест-стенде ниже все мышиные события записываются, и если между событиями проходит больше 1 секунды, то они для удобства чтения отделяются линией. Также присутствуют свойства which/button, по которым можно определить кнопку мыши. Мы их рассмотрим далее.
Начало формы
Конец формы
Каждое событие обрабатывается независимо.
Например, при клике события mouseup + click возникают одновременно, но обрабатываются последовательно. Сначала полностью завершается обработка mouseup, затем запускается click.
Получение информации о кнопке: which
При обработке событий, связанных с кликами мыши, бывает важно знать, какая кнопка нажата.
|
|
|
Для получения кнопки мыши в объекте event есть свойство which.
На практике оно используется редко, т.к. обычно обработчик вешается либо onclick – только на левую кнопку мыши, либо oncontextmenu – только на правую.
Возможны следующие значения:
· event.which == 1 – левая кнопка
· event.which == 2 – средняя кнопка
· event.which == 3 – правая кнопка
Это свойство не поддерживается IE8-, но его можно получить способом, описанным в конце главы.
Правый клик: oncontextmenu
Это событие срабатывает при клике правой кнопкой мыши:
<div>Правый клик на этой кнопке выведет "Клик".</div>
<buttononcontextmenu="alert('Клик!');">Правый клик сюда</button>
При клике на кнопку выше после обработчика oncontextmenu будет показано обычное контекстное меню, которое браузер всегда показывает при клике правой кнопкой. Это является его действием по умолчанию.
Если мы не хотим, чтобы показывалось встроенное меню, например потому что показываем своё, специфичное для нашего приложения, то можно отменить действие по умолчанию.
В примере ниже встроенное меню показано не будет:
<button oncontextmenu="alert('Клик!');return false">Правыйкликсюда</button>
Модификаторы shift, alt, ctrl и meta
Во всех событиях мыши присутствует информация о нажатых клавишах-модификаторах.
Соответствующие свойства:
· shiftKey
· altKey
· ctrlKey
· metaKey (для Mac)
Например, кнопка ниже сработает только на Alt+Shift+Клик:
<button>Alt+Shift+Кликнименя!</button>
<script>
document.body.children[0].onclick=function(e){
if(!e.altKey||!e.shiftKey)return;
alert('Ура!');
}
</script>
