Cодержание
Руководство Javascript MouseEvent
View more Tutorials:


MouseEvent это интерфейс представляющий события, происходящие при взаимодействии пользователей с указательными устройствами (pointing device), например мышь. Обычные события как click, dbclick, mousedown, mouseup,...
MouseEvent это подинтерфейс у UIEvent.

Виды событий у MouseEvent:
Событие | Описание |
---|---|
click | Событие происходит когда пользователь кликает (click) на элемент (element). |
contextmenu | Событие происходит когда пользователь кликает на правую мышь (right-clicks) на элемент, чтобы открыть context-menu. |
dblclick | Событие происходит когда пользователь кликает двойным нажатием (double-clicks) на элемент. |
mousedown | Событие происходит когда пользователь нажимает на кнопку мыши на элемент. |
mouseup | Событие происходит когда пользователь отпускает пальцы с кнопки мыши, нажатой на элемент. |
mouseenter | Событие происходит когда курсор (pointer) движется на элемент. |
mouseleave | Событие происходит когда курсор (pointer) движется из элемента. |
mousemove | Событие происходит когда курсор движется на поверхности элемента или движется на его подэлементах. |
mouseout | Событие происходит когда пользователь двигает курсор из элемента или его подэлементов. |
mouseover | Событие происходит когда пользователь двигает курсор в элемент или в его подэлементы. |
mousedown, mouseup, click
Начнем с самым распространенным событем в событиях мыши это click (Клик), он формируется с действия нажатие (press down) и выпуска (release). Событие click иллюстрируется в изображении ниже:

dbclick
Если вы click (кликаете) быстро 2 раза, то создается событие dbclick.
mouseover vs mouseenter
Событие mouseenter происходит, когда курсор двигается в элемент. Событие mouseover происходит когда курсор движется в элемент или движется в один из его подэлементов.

mouseleave vs mouseout
Событие mouseleave происходит когда курсор движется из элемента. Событие mouseout происходит когда курсор движется из элемента или движется из одного из его подэлементов.

Пример ниже помогает вам сравнить mouseenter vs mouseover, mouseleave vs mouseout:
enter-vs-over-leave-vs-out.html
<!DOCTYPE html>
<html>
<head>
<title>Javascript Mouse Events</title>
<script src="enter-vs-over-leave-vs-out.js"></script>
<style>
#target-div {
width: 320px;
height: 150px;
background: blue;
}
#target-div > div {
width: 50px;
height: 80px;
margin: 40px 0 0 40px;
padding: 5px 0 0 5px;
float: left;
background: yellow;
}
</style>
</head>
<body>
<h3>mouseenter vs mouseover</h3>
<h3>mouseleave vs mouseout</h3>
<div id="target-div"
onmouseenter="mouseenterHandler(event)"
onmouseover="mouseoverHandler(event)"
onmouseleave="mouseleaveHandler(event)"
onmouseout="mouseoutHandler(event)"
>
<div>Child</div>
<div>Child</div>
<div>Child</div>
</div>
<h3>Statistics:</h3>
<div style="color:red;" id="statistics-div">
</div>
</body>
</html>
enter-vs-over-leave-vs-out.js
var enterCount = 0;
var overCount = 0;
var leaveCount = 0;
var outCount = 0;
function mouseenterHandler(evt) {
enterCount += 1;
showStatistics();
}
function mouseoverHandler(evt) {
overCount += 1;
showStatistics();
}
function mouseleaveHandler(evt) {
leaveCount += 1;
showStatistics();
}
function mouseoutHandler(evt) {
outCount += 1;
showStatistics();
}
function showStatistics() {
var html =
"enterCount:" + enterCount + "<br/>" //
+
"overCount:" + overCount + "<hr/>" //
+
"leaveCount:" + leaveCount + "<br/>" //
+
"outCount:" + outCount ;
document.getElementById("statistics-div").innerHTML = html;
}
mousemove
mousemove-example.html
<!DOCTYPE html>
<html>
<head>
<title>Javascript Mouse Events</title>
<script src="mousemove-example.js"></script>
<style>
#target-div {
width: 320px;
height: 150px;
background: blue;
margin-bottom: 50px;
}
#target-div > div {
width: 50px;
height: 150px;
margin: 40px 0 0 40px;
padding: 5px 0 0 5px;
float: left;
background: yellow;
}
</style>
</head>
<body>
<h3>mousemove example</h3>
<div id="target-div" onmousemove="mousemoveHandler(event)">
<div>Child</div>
<div>Child</div>
<div>Child</div>
</div>
<h3>Statistics:</h3>
<div style="color:red;" id="statistics-div">
</div>
</body>
</html>
mousemove-example.js
var moveCount = 0;
function mousemoveHandler(evt) {
moveCount += 1;
showStatistics();
}
function showStatistics() {
var html = "moveCount:" + moveCount;
document.getElementById("statistics-div").innerHTML = html;
}
MouseEvent это подинтерфейс у UIEvent, поэтому он наследует свойства (property) и методы из данного интерфейса.
key
Свойство | Описание |
---|---|
altKey | Возвращает true, если клавиша"ALT" была нажата при происхождении события мыши, если наоборот возвращает false. |
ctrlKey | Возвращает true, если клавиша "CTRL" была нажата при происхождении события мыши, если наоборот возвращает false. |
shiftKey | Возвращает true, если клавиша "SHIFT" была нажата при происхождении события мыши, если наоборот возвращает false. |
metaKey | Возвращает true, если клавиша "META" была нажата при происхождении события мыши, если наоборот возвращает false. |
Пример со свойством ctrlKey:
prop-ctrlKey-example.html
<!DOCTYPE html>
<html>
<head>
<title>Javascript Mouse Events</title>
<style>
#target-div {
width: 320px;
height: 150px;
background: blue;
margin-bottom: 10px;
}
</style>
<script>
function clickHandler(evt) {
var html = "evt.ctrlKey=" + evt.ctrlKey;
document.getElementById("log-div").innerHTML = html;
}
</script>
</head>
<body>
<h3>Press Ctrl key and Click</h3>
<div id="target-div" onclick="clickHandler(event)" >
</div>
<div style="color:red;" id="log-div">
</div>
</body>
</html>
Position:
Свойство | Описание |
---|---|
clientX | Возвращает горизонтальные координаты курсора мыши относительно текущего окна, когда активируется событие мыши. |
clientY | Возвращает вертикальные координаты курсора мыши относительно текущего окна, когда активируется событие мыши. |
offsetX | Возвращает горизонтальные координаты курсора мыши относительно элемента, который генерирует событие мыши. |
offsetY | Возвращает вертикальные координаты курсора мыши относительно элемента, который генерирует событие мыши. |
pageX | Возвращает горизонтальные координаты указателя мыши относительно document (page). |
pageY | Возвращает вертикальные координаты курсора мыши относительно document (page). |
screenX | Возвращает горизонтальные координаты курсора мыши относительно экрана (компьютера или устройства). |
screenY | Возвращает вертикальные координаты курсора мыши относительно экрана (компьютера или устройства). |
movementX | Возвращает горизонтальные координаты курсора мыши относительно местоположения последнего события mousemove. |
movementY | Возвращает вертикальные координаты курсора мыши относительно последнего события mousemove. |

prop-positions-example.html
<!DOCTYPE html>
<html>
<head>
<title>Javascript Mouse Events</title>
<script src="prop-positions-example.js"></script>
<style>
#target-div {
width: 300px;
height: 210px;
background: #ccc;
margin: 0px 0px 10px 20px;
padding: 5px;
}
</style>
</head>
<body style="height:450px; width:1000px;">
<h3>Positions</h3>
<div id="target-div" onmousemove="mousemoveHandler(event)" >
</div>
</body>
</html>
prop-positions-example.js
function mousemoveHandler(evt) {
var html = "offsetX = " + evt.offsetX +"<br/>"
+ "offsetY = " + evt.offsetY +"<br/>"
+ "clientX = " + evt.clientX +"<br/>"
+ "clientY = " + evt.clientY +"<br/>"
+ "pageX = " + evt.pageX +"<br/>"
+ "pageY = " + evt.pageY +"<br/>"
+ "screenX = " + evt.screenX +"<br/>"
+ "screenY = " + evt.screenY +"<br/>"
+ "movementX = " + evt.movementX +"<br/>"
+ "movementY = " + evt.movementY;
document.getElementById("target-div").innerHTML = html;
}
button
Свойство | Описание |
---|---|
button | Возвращает число, которое описывает, какая кнопка мыши была нажата при активации события мыши. |
buttons | Возвращает число, описывающее кнопки мыши, которые были нажаты при активации события мыши. |
which | (Не является стандартным свойством, не стоит использовать). |
event.button:
- 0: Главная кнопка, обычно левая кнопка мыши.
- 1: Вспомогательная кнопка (Auxiliary button), обычно кнопка колеса или средняя кнопка (если имеется).
- 2: 2-ая кнопка, обычно правая кнопка мыши.
- 3: 4-ая кнопка, точнее кнопка Browser Back.
- 4: 5-ая кнопка, точнее кнопка Browser Forward.
event.buttons:
- 0 : Не имеется кнопки или не инициализированы.
- 1 : Главная кнопка, обычно левая кнопка мыши.
- 2 : 2-ая кнопка, обычно правая кнопка мыши.
- 4 : Вспомогательная кнопка (Auxiliary button), обычно кнопка колеса или средняя кнопка (если имеется).
- 8 : 4-ая кнопка, точнее кнопка "Browser Back".
- 16 : 5-ая кнопка, точнее кнопка "Browser Forward".
event.buttons может вернуть другое значение, отличающееся от значений выше. Например event.buttons возвращает 3, если вы нажимете на обе кнопки правую и левую одновременно.
prop-button-buttons-example.html
<!DOCTYPE html>
<html>
<head>
<title>MouseEvent Example</title>
<script>
function mousedownHandler(evt) {
var logDiv = document.getElementById("log-div");
logDiv.innerHTML = "event.button= " + evt.button +"<br/>"
+ "event.buttons= "+ evt.buttons;
}
</script>
</head>
<body>
<h3>event.button, event.buttons</h3>
<button onmousedown="mousedownHandler(event)">Click Me!</button>
<br/><br/>
<div id="log-div" style="color:red;"></div>
</body>
</html>
Other properties
Свойство | Описание |
---|---|
relatedTarget | Возвращает элемент связанный с элементом, который активировал событие мыши. |