События мыши
Ранее в скриптах мы с вами часто использовали событие click – щелчок левой кнопкой мыши. В действительности – это составное событие, то есть, мы сначала нажимаем левую кнопку, затем отпускаем и только потом генерируется событие click. Причем в момент нажатия и отпускания кнопки возникают свои события:
mousedown/mouseup – нажатие и отпускание кнопки мыши.
Давайте в этом убедимся, возьмем вот такой HTML-документ:
DOCTYPE html> html> head> title>Уроки по JavaScripttitle> head> body> script> document.addEventListener("mouseup", ()=>console.log("mouseup")); document.addEventListener("click", ()=>console.log("click")); document.addEventListener("mousedown", ()=>console.log("mousedown")); script> body> html> В нем прописаны три обработчика на события click, mousedown и mouseup. Теперь кликнем по документу и в консоли увидим эти три события в порядке:
mousedown → mouseup → click
И это стандартизированный порядок: данные события возникают именно в такой последовательности. Для двойного клика тоже есть свое событие dblclick. Добавим его:
document.addEventListener("dblclick", ()=>console.log("dblclick"));
Теперь при двойном щелчке левой кнопкой мыши, мы видим такие события:
mousedown → mouseup → click → mousedown → mouseup → click → dblclick
Эта последовательность также стандартизирована и события следуют друг за другом именно в таком порядке.
- event.which == 1 – левая кнопка;
- event.which == 2 – средняя кнопка;
- event.which == 3 – правая кнопка.
document.addEventListener("mousedown", (event)=>console.log("mousedown: "+event.which)); document.addEventListener("mouseup", (event)=>console.log("mouseup: "+event.which));
- event.shiftKey – true, если нажата клавиша Shift и false в противном случае;
- event.altKey – true при нажатом Alt (или Opt для Mac) и false иначе;
- event.ctrlKey – true при нажатом Ctrl и false иначе;
- event.metaKey – true при нажатом Cmd (для Mac) и false иначе.
document.addEventListener("click", (event) => { if(event.shiftKey && event.ctrlKey) console.log("click"); });
Мы здесь увидим сообщение «click» только если при клике были нажаты клавиши Shift и Ctrl. Обратите внимание, когда мы пишем браузерные скрипты, то предполагаем, что они могут быть запущены на самых разных компьютерах с разными ОС, в том числе и Mac OS. Так вот, в ОС Mac пользователи вместо клавиши Ctrl нажимают на клавишу Cmd. И это следует учесть в скрипте, например, так:
- clientX/clientY – координаты курсора мыши относительно окна браузера;
- pageX/pageY – координаты курсора мыши относительно HTML-документа.
document.addEventListener("mousemove", (event)=>console.log("mousemove: "+event.clientX+", "+event.clientY));
- mouseover – возникает при наведении курсора мыши на элемент HTML-документа;
- mouseout – возникает при покидании курсора мыши элемента HTML-документа.
div class="parent">DIV p class="child">Pp> div> style> .parent {background: #CC4444; padding: 10px 0 10px 10px; display: inline-block;width: 100px;} .child {background: #00CC00; padding: 10px;} style> document.addEventListener("mouseover", (event)=>{ let prop = "target = "+event.target.tagName; if(event.relatedTarget != null) prop+=", relatedTarget = "+event.relatedTarget.tagName; console.log("mouseover: "+prop); });
- target – ссылка на объект над которым находится курсор мыши;
- relatedTarget – ссылка на объект, с которого ушел курсор мыши.
- relatedTarget – ссылка на объект над которым находится курсор мыши;
- target – ссылка на объект, с которого ушел курсор мыши.
let div = document.querySelector("div.parent"); div.addEventListener("mouseover", showInfo); function showInfo(event) { let prop = "target = "+event.target.tagName; if(event.relatedTarget != null) prop+=", relatedTarget = "+event.relatedTarget.tagName; let name = event.currentTarget.tagName; console.log(name+" mouseover: "+prop); }
- Не всплывают.
- Событие mouseenter генерируется когда указатель оказывается над элементом и при этом не важно: потомок это элемента или сам элемент.
- Событие mouseleave срабатывает при покидании элемента целиком (дочерние элементы здесь не учитываются).
document.addEventListener("mouseenter", showInfo);
document.addEventListener("mouseover", showInfo);
то мы его успешно перехватываем. Вот эти ограничения следует учитывать при использовании событий mouseenter и mouseleave. Итак, на этом занятии мы с вами рассмотрели работу следующих событий мыши:
| mousedown/mouseup | При нажатии и отпускании кнопки мыши |
| click | При щелчке левой кнопкой мыши |
| dblclick | При двойном щелчке левой кнопкой мыши |
| mousemove | При перемещении мыши |
| mouseover/mouseout | При наведении и покидании курсора мыши на элемент |
| mouseenter/mouseleave | При наведении и покидании курсора мыши на элемент (не всплывают и не учитывают дочерние элементы) |
Также мы с вами рассмотрели следующие свойства объекта event:
| event.which | Номер нажатой кнопки мыши |
| event.shiftKey/altKey/ctrlKey/metaKey | Флаги, указывающие на соответствующую нажатую кнопку клавиатуры |
| event.clientX/clientY | Координаты курсора мыши относительно окна браузера |
| event.pageX/pageY | Координаты курсора мыши относительно HTML-документа |
| event.target/ relatedTarget | Ссылки на объекты в зависимости от типов события: mouseover/mouseout |
JavaScript: Проверьте, нажата ли кнопка мыши?
Есть ли способ определить, находится ли в данный момент кнопка мыши в JavaScript? Я знаю о событии «mousedown», но это не то, что мне нужно. Некоторое время ПОСЛЕ нажатия кнопки мыши я хочу определить, все еще нажата. Возможно ли это?
Почему вы принимаете ответ, который не отвечает на ваш вопрос. Регистрация mousedown и mouseup неверна (так как вы можете мышить вне браузера и позволить ему думать, что вы все еще тянете). Приходить после вашей проблемы и попасть на эту страницу совершенно бесполезно
@Jack Джек, это действительно отвечает на мой вопрос. Пожалуйста, прочитайте мой вопрос, а затем прочитайте ответ. Очевидно, более 100 других людей согласны с тем, что это был хороший ответ.
да . но я, Альфред, и другие 8 говорят вам, что отслеживание мышеловки и муссоудов — неправильный путь. Правильный ответ должен включать анализ объекта события в выбранном вами обработчике или анализ всех событий, связанных с мышью (например, ввод / выход), если вам нужна проверка, управляемая временем, а не проверка, управляемая событиями.
На этот вопрос задавали и отвечали 7+ лет назад. Я не получаю уведомления, когда появляются новые ответы (но я делаю для комментариев). Напишите лучший ответ, и сообщество поднимет его до вершины 🙂 Много информации устареет и все изменится.
@TM. Извините за некро, но . Нет, эта информация никогда не достигнет вершины. Несамостоятельный ответ, однажды принятый, навсегда останется на вершине. Кроме того, «о, так много людей проголосовали за это» не означает, что ответ хороший. это просто означает, что многие люди видели это, думали, что это выглядело хорошо, и поразили голос, потому что это, казалось, работало для них.
15 ответов
В отношении решения Pax: он не работает, если пользователь нажимает несколько кнопок преднамеренно или случайно. Не спрашивайте меня, как я знаю: — (.
Правильный код должен быть таким:
var mouseDown = 0; document.body.onmousedown = function() < ++mouseDown; >document.body.onmouseup = function()
С тестом следующим образом:
Если вы хотите знать, какая кнопка нажата, будьте готовы сделать mouseDown массив счетчиков и посчитать их отдельно для отдельных кнопок:
// let pretend that a mouse doesn't have more than 9 buttons var mouseDown = [0, 0, 0, 0, 0, 0, 0, 0, 0], mouseDownCount = 0; document.body.onmousedown = function(evt) < ++mouseDown[evt.button]; ++mouseDownCount; >document.body.onmouseup = function(evt)
Теперь вы можете проверить, какие кнопки были нажаты точно:
Теперь следует предупредить, что приведенный выше код будет работать только для совместимых со стандартом браузеров, которые передают вам номер кнопки, начиная с 0 и выше. IE использует битовую маску текущих нажатых кнопок:
- 0 для «ничего не нажата»
- 1 для левой
- 2 для правой
- 4 для средних
- и любую комбинацию выше, например, 5 для левой + средней
Поэтому настройте свой код соответственно! Я оставляю это как упражнение.
И помните: IE использует глобальный объект события, называемый & hellip; «Событие».
Кстати, у IE есть функция, полезная в вашем случае: когда другие браузеры отправляют «button» только для событий кнопки мыши (onclick, onmousedown и onmouseup), IE отправляет ее также с помощью onmousemove. Таким образом, вы можете начать слушать onmousemove, когда вам нужно знать состояние кнопки, и проверить на evt.button, как только вы его получите; теперь вы знаете, какие кнопки мыши были нажаты:
// for IE only! document.body.onmousemove = function() < if(event.button)< // aha! we caught a feisty little sheila! >>; Конечно, вы ничего не получаете, если она играет мертвым и не двигается.
Обновление # 1: я не знаю, почему я перенес код document.body-style. Лучше присоединить обработчики событий непосредственно к документу.
Отличный пост, спасибо! Последний бит о перехвате кнопки onmousemove идеален, поскольку эта информация мне нужна только для решения проблемы, которая возникает только в IE (некоторые скриптовые обратные вызовы запускаются при перетаскивании, когда они должны срабатывать только при перетаскивании, и мне нужен был способ остановить их)
Всегда стоит уточнить ваш вопрос как можно точнее. Я просто добавил последний бит как забавный факт. Теперь я рад, что сделал это, потому что это оказалось полезным для вас.
document.body.someevent не работает в IE7. При удалении параметра «event» кнопка event.button работает правильно. К сожалению, это не совсем подходит для моего обходного пути, так как, по крайней мере, при одном из множества «onmousemove» срабатываний, он проскальзывает как ноль. В любом случае, спасибо за информацию.
Я думаю, что это не сработает в Chrome, потому что Chrome не генерирует события mouseup, если исходное mousedown произошло на полосе прокрутки. Пример из этой проблемы Chrome / Chromium . Таким образом, ваша левая кнопка мыши будет внизу навсегда, если есть полоса прокрутки, которую кто-то использует! (В Chrome)
Мне нравится ваше решение, но что, если мышь идет из другого приложения, скажем «ms word», и она перетаскивает какой-то текст. Как вы обнаружите, что мышь не работает?
@bogonko — нет портативного способа сделать это. Но: Google для перетаскивания API для браузеров (не все браузеры поддерживают его, поддерживающие браузеры могут делать это по-разному). В любом случае, если браузер не соответствует вашим ожиданиям, обращайтесь с жалобами к его поставщику — нас должны услышать.
@KajMagnus верно говорит о том, что событие mouseup не было запущено, если mousedown возник на полосе прокрутки. Эта ошибка действительно присутствует во всех браузерах, кроме Firefox! См. Stackoverflow.com/questions/4145402/…
Я не понимаю, почему вы увеличиваете массив mousedown elts во втором примере. Почему счетчик для каждой кнопки, а не bool для каждой кнопки?
Это действительно популярный вопрос (и ответ). Я удивлен, что это еще не произошло, но вам не нужно хранить данные мыши вообще. Вы можете просто подключить event.buttons к любому используемому вами триггеру события без внешних сохраненных переменных. Я задал совершенно новый вопрос (потому что мое мышиное событие не всегда срабатывает, поэтому это решение не работает для меня), и получил этот ответ за 5 минут.
Относительно увеличения или использования bools: код короче с увеличением / уменьшением. В конце концов, это вопрос вкуса.
Даже в 2018 году эта тема все еще актуальна. Я не проверил проблему с прокруткой, но мое собственное приложение (приложение для рисования) застревает в «mousedown» при перетаскивании выделенного текста через холст для рисования.
Я чувствую, что у этого ответа довольно большая проблема. Если вы щелкнете вниз, а затем отпустите за пределами окна или нажмете правую кнопку мыши вообще, при наведении мыши не сработает, ваше значение застрянет больше 0 и ваша проверка окончательно потерпит неудачу.
Нет проблем с нажатием вниз, а затем выпуском за пределы окна. Единственная проблема, с которой я знаком, связан с этим механизмом, когда нажатие мыши преобразуется в операцию копирования текста. Если это важно, вы должны остерегаться этого либо с помощью CSS, либо с помощью JavaScript, в зависимости от того, что подходит.
@RoboticRenaissance Свойство event.buttons поддерживается не во всех браузерах (и до сих пор не поддерживается). Ссылка на MDN
Я думаю, что лучший подход к этому — сохранить свою собственную запись состояния кнопки мыши, как показано ниже:
var mouseDown = 0; document.body.onmousedown = function() < mouseDown = 1; >document.body.onmouseup = function()
+1 и спасибо. Я думал, что, возможно, придется прибегнуть к этому, но я надеялся, что есть какая-то особенность, которая позволяет просто проверить состояние напрямую.
@moala Я думаю, что Int, кажется, меньше печатает, и в конечном итоге немного лучше производительность: jsperf.com/bool-vs-int
решение не является хорошим. в документе можно было бы «mousedown», затем «mouseup» за пределами браузера, и в этом случае браузер все равно думал, что мышь не работает.
единственным хорошим решением является использование объекта IE.event.