首页 » JavaScript DOM » JavaScript 鼠标事件

JavaScript 鼠标事件

摘要：在本教程中，您将学习有关 JavaScript 中的基本鼠标事件及其属性。

JavaScript 鼠标事件简介

当您使用鼠标与页面上的元素进行交互时，会触发鼠标事件。DOM Level 3 事件定义了九种鼠标事件。

mousedown、mouseup 和 click 事件

当您单击某个元素时，会按以下顺序触发至少三个鼠标事件。

  1. 当您在元素上按下鼠标按钮时，会触发mousedown事件。
  2. 当您在元素上释放鼠标按钮时，会触发mouseup事件。
  3. 当在元素上检测到一个mousedown事件和一个mouseup事件时，会触发click事件。
JavaScript mouse event - click event

如果您在元素上按下鼠标按钮，将鼠标光标移出元素，然后释放鼠标按钮。只有mousedown事件会在元素上触发。

同样，如果您按下鼠标按钮，将鼠标移动到元素上，然后释放鼠标按钮，只有mouseup事件会在元素上触发。

在这两种情况下，click事件都不会触发。

dblclick 事件

在实践中，您很少使用dblclick事件。当您双击某个元素时，会触发dblclick事件。

触发dblclick事件需要两次单击事件。dblclick事件有四个不同的事件，按以下顺序触发：

  1.  mousedown
  2.  mouseup
  3.  click
  4.  mousedown
  5.  mouseup
  6.  click
  7.  dblclick
JavaScript mouse event - dblclick event

图片显示click事件始终在dblclick事件之前发生。

如果您在同一个元素上注册了click和dblclick事件处理程序，您将无法知道用户是单击了元素还是双击了元素。

 mousemove

每当您在元素周围移动鼠标光标时，mousemove事件就会重复触发。当鼠标在元素周围移动时，即使只是移动一个像素，mousemove事件也会每秒触发很多次。如果事件处理程序函数很复杂，这可能会导致性能问题。

为了避免性能问题，最好只在需要时添加mousemove事件处理程序，并在不再需要时立即将其删除，例如：

element.onmousemove = mouseMoveEventHandler;
// ...
//  later, no longer use
element.onmousemove = null;Code language: JavaScript (javascript)

mouseover / mouseout

当鼠标光标在元素外部，然后移动到元素边界内时，会触发mouseover事件。

当鼠标光标在元素上，然后移动到另一个元素时，会触发mouseout事件。

mouseenter / mouseleave

当鼠标光标在元素外部，然后移动到元素边界内时，会触发mouseenter事件。

当鼠标光标在元素上，然后移动到元素边界外时，会触发mouseleave事件。

mouseenter和mouseleave都不会冒泡，也不会在鼠标光标移动到子元素上时触发。

注册鼠标事件处理程序

要注册鼠标事件，您可以使用以下步骤：

例如，假设您有以下按钮：

<button id="btn">Click Me!</button>Code language: HTML, XML (xml)

要注册鼠标单击事件处理程序，请使用以下代码：

let btn = document.querySelector('#btn');

btn.addEventListener('click',(event) => {
    console.log('clicked');
});Code language: JavaScript (javascript)

或者，您可以将鼠标事件处理程序分配给元素的属性：

let btn = document.querySelector('#btn');

btn.onclick = (event) => {
    console.log('clicked');
};Code language: JavaScript (javascript)

在传统系统中，您可能会发现事件处理程序是在元素的 HTML 属性中分配的：

<button id="btn" onclick="console.log('clicked')">Click Me!</button>Code language: HTML, XML (xml)

最好使用addEventListener()来注册鼠标事件处理程序。

检测鼠标按钮

传递给鼠标事件处理程序的event对象具有一个名为button的属性，该属性指示哪个鼠标按钮在鼠标上按下以触发该事件。

鼠标按钮由数字表示：

  • 0：按下主鼠标按钮，通常是左按钮。
  • 1：按下辅助按钮，通常是中间按钮或滚轮按钮。
  • 2：按下辅助按钮，通常是右按钮。
  • 3：按下第四个按钮，通常是“浏览器后退”按钮。
  • 4：按下第五个按钮，通常是“浏览器前进”按钮。
javascript mouse event - mouse buttons

请参见以下示例：

<!DOCTYPE html>
<html>
<head>
    <title>JS Mouse Events - Button Demo</title>
</head>
<body>
    <button id="btn">Click me with any mouse button: left, right, middle, ...</button>
    <p id="message"></p>
    <script>
        let btn = document.querySelector('#btn');

        // disable context menu when right-mouse clicked
        btn.addEventListener('contextmenu', (e) => {
            e.preventDefault();
        });

        // show the mouse event message
        btn.addEventListener('mouseup', (e) => {
            let msg = document.querySelector('#message');
            switch (e.button) {
                case 0:
                    msg.textContent = 'Left mouse button clicked.';
                    break;
                case 1:
                    msg.textContent = 'Middle mouse button clicked.';
                    break;
                case 2:
                    msg.textContent = 'Right mouse button clicked.';
                    break;
                default:
                    msg.textContent = `Unknown mouse button code: ${event.button}`;
            }
        });
    </script>
</body>
</html>
Code language: HTML, XML (xml)

在此示例中，当您使用鼠标单击按钮（左键单击、右键单击和中键单击）时，它会在<div>元素上显示相应的消息。

修饰键

当您单击元素时，您可能会按下一个或多个修饰键：Shift、Ctrl、Alt 和 Meta。

请注意，Meta 键在 Windows 键盘上是 Windows 键，在 Apple 键盘上是 Command 键。

要检测这些修饰键是否已按下，您可以使用传递给鼠标事件处理程序的event对象。

event对象有四个布尔属性，如果键正在被按下，则每个属性都设置为true，如果键没有被按下，则设置为false。

请参见以下示例：

<!DOCTYPE html>
<html>
<head>
    <title>JS Modifier Keys Demo</title>
</head>
<body>
    <button id="btnKeys">Click me with Alt, Shift, Ctrl pressed</button>
    <p id="messageKeys"></p>

    <script>
        let btnKeys = document.querySelector('#btnKeys');

        btnKeys.addEventListener('click', (e) => {
            let keys = [];

            if (e.shiftKey) keys.push('shift');
            if (e.ctrlKey) keys.push('ctrl');
            if (e.altKey) keys.push('alt');
            if (e.metaKey) keys.push('meta');

            let msg = document.querySelector('#messageKeys');
            msg.textContent = `Keys: ${keys.join('+')}`;
        });
    </script>
</body>
</html>Code language: HTML, XML (xml)

获取屏幕坐标

传递给鼠标事件处理程序的事件的screenX和screenY属性返回相对于整个屏幕的鼠标位置的屏幕坐标。

JavaScript mouse event -screenX screenY

另一方面，clientX和clientY属性提供应用程序客户端区域内发生鼠标事件的水平和垂直坐标。

请参见以下演示：

<!DOCTYPE html>
<html>
<head>
    <title>JS Mouse Location Demo</title>
    <style>
        #track {
            background-color: goldenrod;
            height: 200px;
            width: 400px;
        }
    </style>
</head>
<body>
    <p>Move your mouse to see its location.</p>
    <div id="track"></div>
    <p id="log"></p>

    <script>
        let track = document.querySelector('#track');
        track.addEventListener('mousemove', (e) => {
            let log = document.querySelector('#log');
            log.innerText = `
            Screen X/Y: (${e.screenX}, ${e.screenY})
            Client X/Y: (${e.clientX}, ${e.clientY})`
        });
    </script>
</body>
</html>Code language: HTML, XML (xml)

摘要

  • DOM Level 3 定义了九种鼠标事件。
  • 使用addEventListener()方法来注册鼠标事件处理程序。
  • event.button指示哪个鼠标按钮被按下以触发鼠标事件。
  • 可以使用传递给鼠标事件处理程序的事件对象的属性获取修饰键：alt、shift、ctrl 和 meta（Mac）。
  • screenX和screenY属性返回鼠标指针在屏幕坐标中的水平和垂直坐标。
  • event对象的clientX和clientY属性返回应用程序客户端区域内发生鼠标事件的水平和垂直坐标。

测验

本教程对您有帮助吗？
JavaScript beforeunload Event
之前
JavaScript beforeunload 事件
下一步
JavaScript 键盘事件
JavaScript Keyboard Events