Javascript при наведении мыши событие: Событие при наведении мыши javascript код с пошаговой инструкцией

Содержание

Событие при наведении мыши javascript код с пошаговой инструкцией

Доброго времени суток, любознательные подписчики и гости блога. Сегодня мы разберем с вами полезный раздел в прототипно-ориентированном сценарном языке, а именно событие при наведении мыши JavaScript.

Я хочу, чтобы вы хорошенько разобрались в таких событиях, как click, mouseup, mousedown, mouseover и других, поняли разницу между ними и научились их использовать для решения поставленных задач. Конечно же после каждого ключевого теоретического материала вы сможете найти программную реализацию примеров. Ну что ж, приступим!

Все сведенья о событиях мышки

Для мыши существует несколько событий, которые полностью охватывают всевозможные действия курсора на странице веб-приложения. Среди них есть те, которые срабатывают при нажатии на объект, наведении на него или движении указателя по открытому окну. Их все можно поделить на две группы: простые и комплексные (составные) события.

Начнем с простого

Для начала познакомимся с простыми событиями. Их всего пять. Для удобства я поместил описание каждого инструмента в таблицу, прикрепленную ниже.

Наименование	Описание
mousedown	Названный event вызывается, когда одна из кнопок мышки нажата, но пока еще не отпущена.
mouseup	А этот срабатывает уже при отпускании зажатой ранее кнопочки.
mouseover	Вызывается при наведении курсора на обрабатываемый объект.
mouseout	Обрабатывает действие выхода курсора из области элемента.
mousemove	Любое движение указателя над определенной областью вызывает текущее событие.

Ну а теперь для закрепления материала разберем пример. Я создал небольшую программку, в которой изменяются эмоции смайла при наведении и отведении курсора.

<!DOCTYPE html>
<html>
<head>
  <title>Пример наведения указателя на элемент страницы</title>
  <meta charset="utf-8">
</head>
<body>
 
<img name="pic" src="http://storage2.vsemayki.ru/images/0/0/514/514102/previews/sign_front_white_500.jpg" alt="Smiley">
<h3>Наведите на изображение курсор мыши и оно изменится.</h3>
<h3>А теперь отведите его в сторону и понаблюдайте за изменениями</h3>
<script>
function ChangeOver(x) {
 x.src= 'http://storage2.vsemayki.ru/images/0/0/514/514012/previews/sign_front_white_500.jpg';
};
 
function ChangeOut(x) {   
 x.src= 'http://storage2.vsemayki.ru/images/0/0/514/514102/previews/sign_front_white_500.jpg';
}
</script>
 
</body>
</html>

<!DOCTYPE html> <html> <head> <title>Пример наведения указателя на элемент страницы</title> <meta charset=»utf-8″> </head> <body> <img name=»pic» src=»http://storage2.vsemayki.ru/images/0/0/514/514102/previews/sign_front_white_500.jpg» alt=»Smiley»> <h3>Наведите на изображение курсор мыши и оно изменится.</h3> <h3>А теперь отведите его в сторону и понаблюдайте за изменениями</h3> <script> function ChangeOver(x) { x.src= ‘http://storage2.vsemayki.ru/images/0/0/514/514012/previews/sign_front_white_500.jpg’; }; function ChangeOut(x) { x.src= ‘http://storage2.vsemayki.ru/images/0/0/514/514102/previews/sign_front_white_500.jpg’; } </script> </body> </html>

Пришло время группировки

Теперь давайте перейдем к комплексным видам. Каждый из таких событий включает в себя несколько простых. При этом все составные части комплексного события не срабатывают одновременно, а выстраиваются в очередь. Поэтому вы иногда могли наблюдать такую ситуацию, что при быстром кликанье по, к примеру, пунктам меню веб-сайта нажатия иногда не срабатывают.

Почему же так? Ответ достаточно прост.

Обработка событий происходит с какой-то максимально допустимой скоростью. И при этом не стоит забывать, что события обрабатываются по очереди. А значит при слишком быстром нажатии на разные элементы цепочка обработки может не выполниться полностью.

Итак, ниже перечислены составные события.

Наименование	Описание
click	Вызывается при щелчке левой кнопкой мышки. Таким образом, здесь вначале срабатывает mousedown, а после mouseup. При этом порядок выполнения будет выглядеть следующим образом: mousedown → mouseup → click.
contextmenu	Срабатывает при клике, однако если была нажата правая кнопка мыши. Цепочка событий аналогична предыдущей.
Dblclick	Текущий элемент запустится на обработку после двойного щелчка на обрабатываемом объекте. Очередь вызовов будет выглядеть следующим образом (однако не в Internet Explorer 8-): · mousedown; · mouseup+click; · mousedown; · mouseup+click+dblclick.

Как вы уже поняли, комплексные события несколько упрощают жизнь разработчиков, включая в себя сразу набор необходимых простых event-ов. Вследствие этого на сегодняшний день никто не может представить обычной обработки кнопок или других элементов без того же click.

Для практического ознакомления с функционированием выше перечисленных событий я модифицировал предыдущее приложение. Проанализируйте результат моей работы.

<!DOCTYPE html>
<html>
<head>
  <title>Пример наведения указателя на элемент страницы</title>
  <meta charset="utf-8">
</head>
<body>
 
<img src="http://storage2.vsemayki.ru/images/0/0/514/514102/previews/sign_front_white_500.jpg" alt="Smiley">
 
<button>Нажмите на меня один раз и смайл улыбнется!</button>
<button ondblclick="Move()">А теперь нажмите на меня двойным кликом и смайл начнет двигаться!</button>
<button oncontextmenu="Cry()">Если хочешь вернуться к начальному состоянию, то нажми на меня правой кнопкой!</button>
 
<script>
function Smile() {
 document.getElementById('pic').src= 'http://storage2.vsemayki.ru/images/0/0/514/514012/previews/sign_front_white_500.jpg';
};
 
function Cry() {   
 document.getElementById('pic').src= 'http://storage2.vsemayki.ru/images/0/0/514/514102/previews/sign_front_white_500.jpg';
};
 
function Move() {   
 document.getElementById('pic').src= 'https://otvet.imgsmail.ru/download/197747824_e708b2123d2b2d745d271f15cb144dcc_800.gif';
};
</script>
 
</body>
</html>

<!DOCTYPE html> <html> <head> <title>Пример наведения указателя на элемент страницы</title> <meta charset=»utf-8″> </head> <body> <img src=»http://storage2.vsemayki.ru/images/0/0/514/514102/previews/sign_front_white_500.jpg» alt=»Smiley»> <button>Нажмите на меня один раз и смайл улыбнется!</button> <button ondblclick=»Move()»>А теперь нажмите на меня двойным кликом и смайл начнет двигаться!</button> <button oncontextmenu=»Cry()»>Если хочешь вернуться к начальному состоянию, то нажми на меня правой кнопкой!</button> <script> function Smile() { document.getElementById(‘pic’).src= ‘http://storage2.vsemayki.ru/images/0/0/514/514012/previews/sign_front_white_500.jpg’; }; function Cry() { document.getElementById(‘pic’).src= ‘http://storage2.vsemayki.ru/images/0/0/514/514102/previews/sign_front_white_500.jpg’; }; function Move() { document.getElementById(‘pic’).src= ‘https://otvet.imgsmail.ru/download/197747824_e708b2123d2b2d745d271f15cb144dcc_800.gif’; }; </script> </body> </html>

Как видите, все очень просто. Данные элементы легко вызывать в коде и привязывать их к определенным действиям.

На этой ноте я завершаю свой рассказ. Надеюсь вы почерпнули для себя что-то интересное, новое и полезное!

Если вы желаете и дальше читать мои статьи, а также узнавать о публикации новых, то подписывайтесь на обновления блога. И не забывайте делиться ссылками на понравившиеся темы с друзьями. До будущих встреч! Пока-пока!

С уважением, Роман Чуешов

Загрузка…

Прочитано: 768 раз

события мыши mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter

Ранее в скриптах
мы с вами часто использовали событие click – щелчок левой
кнопкой мыши. В действительности – это составное событие, то есть, мы сначала
нажимаем левую кнопку, затем отпускаем и только потом генерируется событие click. Причем в
момент нажатия и отпускания кнопки возникают свои события:

mousedown/mouseup
– нажатие и отпускание кнопки мыши.

Давайте в этом
убедимся, возьмем вот такой HTML-документ:

<!DOCTYPE html>
<html>
<head>
<title>Уроки по JavaScript</title>
</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

Эта
последовательность также стандартизирована и события следуют друг за другом
именно в таком порядке.

Для событий mousedown
и mouseup в объекте event полезным является еще одно свойство:

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));

Теперь мы знаем
какая кнопка мыши была нажата при возникновении данных событий.

Также часто
совместно с мышью используется клавиатура. Например, в графических редакторах
клавиши Alt (или Opt для Mac), Ctrl, Shift и Cmd для Mac добавляют
функционал манипулятору «мышь». Чтобы в событиях мыши проверить: была ли
дополнительно нажата еще какая-либо функциональная клавиша, используются
следующие свойства объекта event:

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. И это следует
учесть в скрипте, например, так:

if(event.shiftKey && (event.ctrlKey || event.metaKey))
           console.log("click");

Здесь мы
проверяем не только Ctrl, но и свойство metaKey, отвечающее за нажатие на
кнопку Cmd.

Также не нужно
забывать и про пользователей мобильных устройств с отсутствующей клавиатурой.
Так что они вряд ли смогут перемещать курсор мыши с нажатой клавишей Shift!

Кроме клавиш,
объект event для событий от
мыши, содержит свойства:

clientX/clientY
– координаты курсора мыши относительно окна браузера;
pageX/pageY
– координаты курсора мыши относительно HTML-документа.

Например, для
события mousemove будем выводить координаты курсора мыши в консоль:

document.addEventListener("mousemove",
  (event)=>console.log("mousemove: "+event.clientX+", "+event.clientY));

Аналогично
работают свойства pageX/pageY.

Следующие два
события мыши

mouseover
– возникает при наведении курсора мыши на элемент HTML-документа;
mouseout – возникает при
покидании курсора мыши элемента HTML-документа.

Например,
у нас есть вот такое содержимое страницы:

<div>DIV
    <p>P</p>
</div>

Со стилями:

<style>
.parent {background: #CC4444; padding: 10px 0 10px 10px; 
        display: inline-block;width: 100px;}
.child {background: #00CC00; padding: 10px;}
</style>

И
добавим обработчик события mouseover:

document.addEventListener("mouseover", (event)=>{
   let prop = "target = "+event.target.tagName;
   if(event.relatedTarget != null)
      prop+=", relatedTarget = "+event.relatedTarget.tagName;
 
      console.log("mouseover: "+prop);
});

Здесь
у объекта event мы используем
два новых свойства:

target – ссылка на
объект над которым находится курсор мыши;
relatedTarget
– ссылка на объект, с которого ушел курсор мыши.

Давайте
посмотрим, как это все будет работать. Объясняем.

А
вот для другого события mouseout эти свойства работают с точностью
наоборот:

relatedTarget
– ссылка на объект над которым находится курсор мыши;
target – ссылка на
объект, с которого ушел курсор мыши.

Изменим в
обработчике событие на mouseout и обновим документ. Видите, эти
свойства работают именно так, что логично, так как событие mouseout возникает при
покидании элемента, значит target будет тем элементом, с которого
мы ушли, а relatedTarget – элементом где мы сейчас находимся.

События mouseover
и mouseout всплывают от
целевого элемента, где они произошли и доходят до корня DOM-дерева –
объекта document. Например, если
повесить событие mouseover на тег div:

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);
}

То при наведении
курсора на дочерний элемент p, увидим событие mouseover. Причем при
переходе с дочернего элемента и обратно также генерируется это событие.

Если же мы хотим
чтобы событие возникало один раз при наведении на него курсора мыши, то можно воспользоваться
эквивалентными событиями:

mouseenter
и
mouseleave

которые похожи на
mouseover/mouseout, но:

Не всплывают.
Событие mouseenter
генерируется когда указатель оказывается над элементом и при этом не важно:
потомок это элемента или сам элемент.
Событие mouseleave
срабатывает при покидании элемента целиком (дочерние элементы здесь не
учитываются).

Например,
заменим событие mouseover на mouseenter, получим. Смотрите, теперь при переходе
между дочерним элементом и div дополнительных событий не возникает.
Аналогично работает и mouseleave.

Из-за того, что
события mouseenter и mouseleave не всплывают, они не могут быть делегированы
обработчику верхнего уровня, например, для объекта document:

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

Событие onmouseover | htmlbook.ru

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
4.0+	7.0+	1.0+	4.0+	1.0+	1.0+	1.0+	1.0+

Описание

Событие onmouseover срабатывает, когда курсор мыши наводится на элемент, к которому добавлен атрибут onmouseover. Это один из самых популярных атрибутов, применяемый для создания различных эффектов с изображениями и другими объектами веб-страницы. Обычно работает в связке с событием onmouseout.

Синтаксис

onmouseover="скрипт"

Значения

Код скрипта

Значение по умолчанию

Нет.

Применяется к тегам

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Событие onmouseover</title>
 </head>
 <body>
  <p><img src="images/graph2.png" alt=""
  
  >&nbsp;
  <img src="images/graph2.png" alt=""
   
  ></p>
 </body>
</html>

В данном примере при наведении курсора на изображение оно заменяется на другое, что создает эффект превращения черно-белой картинки в цветную (рис. 1).

Рис. 1. Использование события onmouseover

Браузеры

Internet Explorer до версии 7.0 содержит ошибку при работе с изображениями, события onmouseover и onmouseout для тега <img> не обрабатываются.

Реакции на действие мышки в js. Javascript события мыши

В этой статье речь пойдет о Javascript событиях мыши. Эти события являются очень важными в Javascript и используются на каждом шагу. Сначала я расскажу вам о всех стандартных событиях связанных с мышкой: mousedown , mouseup , click , dblclick , mousemove и, наконец, mouseover и mouseout .

События mousedown, mouseup и click

Когда пользователь кликает на элемент, то срабатывает не меньше чем 3 события мыши в таком порядке:

mousedown , пользователь нажал кнопку мыши на элементе
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;

Mouseover и mouseout события

Давайте рассмотрим небольшой пример. Попробуйте поводить курсор мышки поверх элементов с разным фоном. Элемент 1 должен слегка мигать при наведении на него курсором — это срабатывает событие mouseover .

Element№1

Element№2
span

Тем не менее, как Вы видите, это событие срабатывает и при наведении курcора мыши на элемент№2 и даже span.

Причина такого поведение в том, что событие установленное на первый элементы также применяется к его дочерним нодам. Все предельно ясно, но проблема возникает тогда, когда нам надо совершить какое-то действие при переходе курсора мышки, например, от элемента span к элементу№2.

«Откуда пришла мышь?» или свойства relatedTarget, fromElement и toElement

Microsoft создали два ствойства чтобы хранить эту информацию:

fromElement — относится к элементу от которого пришла мышь.
toElement — к элементу к которому пришла мышь.

Кроссбраузерный код

И так если Вы хотите знать откуда пришла мышка используя событие mouseover , ипользуйте следующий скрипт:

Function doSomething(e) {
var relTarg = e.relatedTarget || e.fromElement;
}

В случае ипользования события mouseout (элемент, к которому движется курсор):

Function doSomething(e) {
if (!e) var e = window.event;
var relTarg = e.relatedTarget || e.toElement;
}

Mouseenter и mouseleave

Microsoft предлагает другой способ решения проблемы. Они создали 2 новых события mouseenter и mouseleave . Эти события имеют такое же поведение как mouseover и mouseout . Единственно отличие — это то, что события не «перепрыгивают» на дочерние элементы. Это очень хорошо решает нашу проблему, представленную в примере.

Ну вот и все о чем я хотел рассказать касательно Javascript событий мыши. С удовольствием отвечу на ваши комментарии.

SSH
(англ. Secure SHell — «безопасная оболочка») — сетевой протокол сеансового уровня, позволяющий производить удалённое управление операционной системой и туннелирование TCP-соединений (например, для передачи файлов). Схож по функциональности с протоколами Telnet и rlogin, но, в отличие от них, шифрует весь трафик, включая и передаваемые пароли. SSH допускает выбор различных алгоритмов шифрования. SSH-клиенты и SSH-серверы доступны для большинства сетевых операционных систем.

SSH позволяет безопасно передавать в незащищенной среде практически любой другой сетевой протокол. Таким образом, можно не только удаленно работать на компьютере через

События мыши

В этой главе мы более подробно рассмотрим события мыши и их свойства.

Обратите внимание: такие события могут исходить не только от «устройств мыши», но и от других устройств, таких как телефоны и планшеты, где они эмулируются для совместимости.

Некоторые из этих событий мы уже видели:

mousedown / mouseup: Кнопка мыши нажата / отпущена над элементом.
наведение мыши / наведение курсора: Указатель мыши выходит за элемент или выходит из него.
mousemove: Каждое наведение мыши на элемент вызывает это событие.
нажмите: Срабатывает после mousedown , а затем mouseup над тем же элементом, если использовалась левая кнопка мыши.
dblclick: Срабатывает после двух щелчков по одному и тому же элементу за короткий промежуток времени. В настоящее время используется редко.
контекстное меню: Срабатывает при нажатии правой кнопки мыши.Есть и другие способы открыть контекстное меню, например при использовании специальной клавиши на клавиатуре он срабатывает и в этом случае, так что это не совсем событие мыши.

… Есть и другие события, о них мы расскажем позже.

Как видно из списка выше, действие пользователя может вызвать несколько событий.

Например, щелчок левой кнопкой сначала запускает mousedown , когда кнопка нажата, затем mouseup и щелкает , когда она отпущена.

В случаях, когда одно действие инициирует несколько событий, их порядок фиксирован. То есть обработчики вызываются в порядке mousedown → mouseup → click .

Нажмите кнопку ниже, и вы увидите события. Попробуйте также дважды щелкнуть.

На тестовом стенде ниже регистрируются все события мыши, и если между ними задержка более 1 секунды, они разделяются горизонтальной линейкой.

Также мы можем увидеть свойство button , которое позволяет обнаруживать кнопку мыши, это объясняется ниже.

События, связанные с кликом, всегда имеют свойство button , которое позволяет получить точную кнопку мыши.

Обычно мы не используем его для событий click и contextmenu , потому что первое происходит только при щелчке левой кнопкой мыши, а второе — только при щелчке правой кнопкой мыши.

С другой стороны, обработчики mousedown и mouseup нам могут понадобиться event.button , потому что эти события запускаются на любой кнопке, поэтому button

The MouseEvent

❮ События DOM
❮ Объекты событий

Объект MouseEvent

События, возникающие при взаимодействии мыши с документом HTML, относятся к объекту MouseEvent.

Свойства и методы MouseEvent

Свойство / Метод	Описание
altKey	Возвращает, была ли нажата клавиша «ALT», когда было инициировано событие мыши.
кнопка	Возвращает, какая кнопка мыши была нажата при срабатывании события мыши
кнопки	Возвращает, какие кнопки мыши были нажаты при срабатывании события мыши
клиент X	Возвращает горизонтальную координату указателя мыши относительно текущего окна, когда событие мыши было инициировано
клиент	Возвращает вертикальную координату указателя мыши относительно текущего окна, когда событие мыши было инициировано
ключ	Возвращает, была ли нажата клавиша «CTRL», когда было инициировано событие мыши.
getModifierState ()	Возвращает истину, если указанный ключ активирован
metaKey	Возвращает, была ли нажата клавиша «META» при срабатывании события
механизм X	Возвращает горизонтальную координату указателя мыши относительно позиция последнего события mousemove
движение Y	Возвращает вертикальную координату указателя мыши относительно позиция последнего события mousemove
смещение X	Возвращает горизонтальную координату указателя мыши относительно положение края целевого элемента
смещение Y	Возвращает вертикальную координату указателя мыши относительно положение края целевого элемента
стр X	Возвращает горизонтальную координату указателя мыши относительно документа, когда событие мыши было инициировано
стр.	Возвращает вертикальную координату указателя мыши относительно документа, когда событие мыши было инициировано
регион
relatedTarget	Возвращает элемент, связанный с элементом, вызвавшим событие мыши
экран X	Возвращает горизонтальную координату указателя мыши относительно экрана, когда событие было инициировано
экран	Возвращает вертикальную координату указателя мыши относительно экрана, когда событие было инициировано
ShiftKey	Возвращает, была ли нажата клавиша «SHIFT» при срабатывании события
который	Возвращает, какая кнопка мыши была нажата при срабатывании события мыши

Унаследованные свойства и методы

MouseEvent наследует все свойства и методы от:

The UiEvent

Объект события

Типы событий

Эти типы событий относятся к объекту MouseEvent:

Событие	Описание
onclick	Событие происходит, когда пользователь нажимает на элемент
контекстное меню	Событие возникает, когда пользователь щелкает правой кнопкой мыши элемент, чтобы открыть контекстное меню.
ondblclick	Событие возникает, когда пользователь дважды щелкает элемент
onmousedown	Событие происходит, когда пользователь нажимает кнопку мыши над элементом
onmouseenter	Событие возникает, когда указатель перемещается на элемент
onmouseleave	Событие возникает, когда указатель перемещается из элемента
onmousemove	Событие возникает, когда указатель перемещается, когда он находится над элементом
на мышке	Событие возникает, когда пользователь перемещает указатель мыши за пределы элемента или одного из его дочерних элементов
на мышь над	Событие происходит, когда указатель перемещается на элемент или на один из его дочерних элементов
onmouseup	Событие происходит, когда пользователь отпускает кнопку мыши над элементом