betacode

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

  1. MouseEvent
  2. Properties & Methods

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

Pуководства ECMAScript, Javascript

Show More

Pуководства ECMAScript, Javascript

Show More

Новейшие статьи

    Show More