W3Docs

Тема

Русский

Основы событий мыши в JavaScript ​

Введение ​

В JavaScript обработка событий мыши особенно важна, поскольку позволяет разработчикам создавать интерактивные и отзывчивые интерфейсы. Это подробное руководство познакомит вас с событиями мыши в JavaScript, приведя детальные примеры и варианты применения, чтобы помочь вам освоить их использование для улучшения пользовательского опыта.

Понимание событий мыши в JavaScript ​

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

Основные события мыши ​

  • click: Определяет момент нажатия и отпускания кнопки мыши на одном элементе.
  • dblclick: Возникает, когда по элементу быстро щёлкают дважды.
  • mouseover: Срабатывает, когда курсор мыши наводится на элемент.
  • mouseout: Срабатывает, когда курсор мыши покидает элемент.
  • mousemove: Возникает, когда мышь перемещается над элементом.
  • mousedown: Срабатывает, когда кнопка мыши нажимается на элементе.
  • mouseup: Определяет момент отпускания кнопки мыши над элементом.
  • contextmenu: Происходит при щелчке правой кнопкой мыши (до отображения контекстного меню).

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

Реализация базовых обработчиков событий мыши ​

Пример: создание кнопки, на которую можно нажимать ​

Рассмотрим кнопку, которая меняет цвет каждый раз при щелчке. Это простое взаимодействие можно реализовать с помощью события click.

html
<div>
    <button id="colorButton">Click me to change color</button>
</div>
<script>
    document.getElementById('colorButton').addEventListener('click', function() {
        this.style.backgroundColor = this.style.backgroundColor === 'red' ? 'blue' : 'red';
    });
</script>
Try it Yourself »

В этом примере каждый щелчок меняет цвет фона кнопки между красным и синим. Это не только улучшает визуальную обратную связь, но и знакомит пользователей с динамическими изменениями через простые взаимодействия.

Продвинутое взаимодействие: событие двойного щелчка ​

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

html
<div>
    <p id="text">Double-click me to toggle text size.</p>
</div>
<script>
    document.getElementById('text').addEventListener('dblclick', function() {
        this.style.fontSize = this.style.fontSize === '16px' ? '32px' : '16px';
    });
</script>
Try it Yourself »

Этот скрипт увеличивает размер шрифта при первом двойном щелчке и сбрасывает его при следующем, что делает его практичной функцией для повышения удобочитаемости.

События mouseenter и mouseleave ​

Эти события срабатывают, когда курсор мыши входит в область элемента или покидает её соответственно. В отличие от mouseover и mouseout, они не всплывают, что предотвращает нежелательные срабатывания при перемещении курсора по дочерним элементам.

Пример: подсветка текста при наведении ​

html
<div>
  <p id="hoverText">Hover over me to highlight.</p>
</div>
<script>
  document.getElementById('hoverText').addEventListener('mouseenter', function() {
    this.style.color = 'green';
  });
  document.getElementById('hoverText').addEventListener('mouseleave', function() {
    this.style.color = 'black';
  });
</script>
Try it Yourself »

Этот пример улучшает взаимодействие с пользователем, меняя цвет текста на зелёный при наведении мыши и возвращая его к чёрному, когда курсор уходит, демонстрируя использование mouseenter и mouseleave.

Использование перемещения мыши ​

Пример: отображение координат мыши ​

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

html
<div>
    <p id="mousePosition" style="height: 100px; background-color: orangered">
 Hover here to track your mouse position!
</p>
</div>
<script>
    document.getElementById('mousePosition').addEventListener('mousemove', function(event) {
        this.textContent = `Mouse Position - X: ${event.clientX}, Y: ${event.clientY}`;
    });
</script>
Try it Yourself »

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

Продвинутые применения ​

Реализация пользовательского контекстного меню ​

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

javascript
<div>
<p>Right Click anywhere to see a customized context menu other than the default one in the browser!</p>
</div>
<div>
    <div id="contextMenu" style="display:none; position:absolute; background-color:white; border:1px solid black; padding:10px;">
        <ul>
            <li>Refresh</li>
            <li>Save Page</li>
            <li>Search</li>
        </ul>
    </div>
</div>
<script>
    document.addEventListener('contextmenu', function(event) {
        event.preventDefault();
        let menu = document.getElementById('contextMenu');
        menu.style.display = 'block';
        menu.style.left = `${event.clientX}px`;
        menu.style.top = `${event.clientY}px`;
    });

    document.addEventListener('click', function(event) {
        const menu = document.getElementById('contextMenu');
        if (!menu.contains(event.target)) {
            menu.style.display = 'none';
        }
    });
</script>
Try it Yourself »

Этот код на JavaScript выполняет две основные задачи:

  1. При щелчке правой кнопкой мыши:

    • Он предотвращает появление стандартного контекстного меню.
    • Он показывает пользовательское меню в месте, где вы щёлкнули правой кнопкой. Меню появляется там, где находился курсор мыши.

  2. При щелчке в любом месте:

    • Он скрывает пользовательское меню, чтобы оно не оставалось на экране.

Создание интерактивной графики с помощью HTML Canvas ​

Это интерактивное приложение для рисования позволяет пользователям рисовать на холсте с помощью мыши. Событие mousemove отслеживает движение мыши, чтобы рисовать линии, что идеально подходит для простых графических приложений или игр.

Пример: простое приложение для рисования ​

html
<div>
<p>Start drawing in the box below and see the result!</p>
</div>
<div>
  <canvas id="drawingCanvas" width="400" height="300" style="border:1px solid #000;"></canvas>
</div>
<script>
  const canvas = document.getElementById('drawingCanvas');
  const ctx = canvas.getContext('2d');
  let drawing = false;

  canvas.addEventListener('mousedown', () => {
    drawing = true;
    ctx.beginPath();
  });
  canvas.addEventListener('mouseup', () => drawing = false);
  canvas.addEventListener('mouseout', () => drawing = false);
  canvas.addEventListener('mousemove', function(event) {
    if (drawing) {
      const rect = canvas.getBoundingClientRect();
      ctx.lineTo(event.clientX - rect.left, event.clientY - rect.top);
      ctx.stroke();
    }
  });
</script>
Try it Yourself »

Этот код создаёт на веб-странице область для рисования с помощью элемента <canvas>:

  • JavaScript для рисования:
    • Сначала он получает canvas и его контекст рисования, который используется для рисования.
    • Рисование начинается, когда вы нажимаете кнопку мыши на canvas, и останавливается, когда вы отпускаете кнопку мыши или уводите курсор за пределы canvas.
    • Когда вы перемещаете мышь по canvas с зажатой кнопкой мыши, он рисует линии, следуя за курсором.

Реализация функций перетаскивания ​

html
<div>
<div id="draggable" style="width: 100px; height: 100px; background: blue; position: absolute; color: white; padding: 10px">    Drag me!
  </div>
</div>
<script>
  const draggable = document.getElementById('draggable');
  let active = false;
  let currentX;
  let currentY;
  let initialX;
  let initialY;

  draggable.addEventListener('mousedown', function(event) {
    active = true;
    const rect = draggable.getBoundingClientRect();
    initialX = event.clientX - rect.left;
    initialY = event.clientY - rect.top;
  });

  document.addEventListener('mouseup', function() {
    active = false;
  });

  document.addEventListener('mousemove', function(event) {
    if (active) {
      currentX = event.clientX - initialX;
      currentY = event.clientY - initialY;
      draggable.style.left = currentX + 'px';
      draggable.style.top = currentY + 'px';
    }
  });
</script>
Try it Yourself »

Этот код создаёт на веб-странице простой синий квадрат, который можно перетаскивать:

  • JavaScript для перетаскивания:

    • Квадрат можно перемещать, щёлкнув по нему и удерживая кнопку мыши. Когда вы нажимаете кнопку мыши (mousedown), он подготавливает квадрат к перемещению.
    • Когда вы отпускаете кнопку мыши (mouseup), квадрат перестаёт двигаться.
    • Пока кнопка мыши удерживается, если вы перемещаете мышь (mousemove), квадрат следует за курсором по экрану, перемещаясь туда, куда вы его перетаскиваете.

Повышение удобства использования форм ​

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

html
<div>
  <p style="font-weight: bold;">Hover your mouse on the icon!</p>
    <label for="password">Password:</label>
    <input type="password" id="password" />
    <span id="helpIcon" style="cursor: help;">&#9432;</span>
    <div id="helpText" style="display:none; margin-top: 10px;">Use 8 or more characters with a mix of letters, numbers & symbols.</div>
</div>
<script>
    document.getElementById('helpIcon').addEventListener('mouseover', function() {
        document.getElementById('helpText').style.display = 'block';
    });

    document.getElementById('helpIcon').addEventListener('mouseout', function() {
        document.getElementById('helpText').style.display = 'none';
    });
</script>
Try it Yourself »

Этот код предоставляет функцию помощи для поля ввода пароля на веб-странице:

  • Поле пароля и значок помощи: Здесь есть метка и поле ввода пароля. Рядом с полем находится значок помощи. Когда вы наводите курсор на этот значок:

  • JavaScript для отображения текста помощи:

    • Когда вы наводите курсор на значок (mouseover), появляется скрытое сообщение прямо под ним. Это сообщение даёт советы по созданию надёжного пароля.
    • Когда вы уводите курсор от значка (mouseout), сообщение исчезает.

Заключение ​

События мыши в JavaScript предоставляют мощный набор инструментов для создания интерактивных и удобных для пользователя веб-интерфейсов. От простых щелчков до сложных пользовательских меню — эти события позволяют разработчикам проектировать более интуитивные и увлекательные интерфейсы. Понимая и эффективно применяя эти события, разработчики могут значительно улучшить динамику взаимодействия любого сайта, сделав его более отзывчивым и приятным для пользователей. Независимо от того, создаёте ли вы простое веб-приложение или сложную интерактивную платформу, освоение событий мыши в JavaScript — это важный навык в арсенале любого современного веб-разработчика.

Practice ​

Какие из следующих вариантов являются типами событий мыши в JavaScript?

Считаете ли это полезным?

Предпросмотр dual-run — сравните с маршрутами Symfony на продакшене.