Cодержание

Руководство Javascript MouseEvent

1- MouseEvent

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

 

2- Properties & Methods

MouseEvent это подинтерфейс у  UIEvent, поэтому он наследует свойства (property) и методы из данного интерфейса.
  • TODO Link!

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 Возвращает элемент связанный с элементом, который активировал событие мыши.