JavaScript 中常见的鼠标事件及应用

我自纵横20232025-04-06 8:11

JavaScript 中常见的鼠标事件及应用

在 JavaScript 中，鼠标事件是用户与网页进行交互的重要方式，通过监听这些事件，开发者可以实现各种交互效果，如点击、悬停、拖动等。

在 JavaScript 中，鼠标事件类型多样，下面为你详细介绍常见的鼠标事件类型及应用：

一. 基础交互事件

1. click

触发时机：

当用户在元素上按下并释放鼠标主按钮（通常是左键）时触发。

应用场景：

常用于处理按钮点击、链接跳转、表单提交等操作。

示例代码：
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<body>
    <button id="myButton">点击我</button>
    <script>
        const button = document.getElementById('myButton');
        button.addEventListener('click', function () {
            alert('按钮被点击了！');
        });
    </script>
</body>
</html>

2. dblclick

触发时机：

当用户在短时间内快速连续点击两次鼠标主按钮时触发。

应用场景：

可用于实现双击放大图片、编辑文本等功能。

示例代码：
html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <style>
        #myDiv {
            width: 200px;
            height: 200px;
            background-color: lightblue; /* 初始背景颜色 */
            display: flex; /* 使用flex布局 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            font-size: 30px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>双击鼠标事件，改变颜色</h1>
    <div id="myDiv">双击我，<br>改变颜色</div>

    <script>
        const div = document.getElementById('myDiv');
        // 颜色数组
        const color = ['lightblue', 'pink', 'lightgreen', 'lightyellow', 'lightgray']; 
        // 初始化计数器为-1，以便第一次双击时颜色数组从索引0开始变化
        let dblcount = -1; 

        // 添加双击事件监听器
        div.addEventListener('dblclick', function () {
            dblcount++;
            // 循环改变背景颜色
            this.style.backgroundColor = color[dblcount % color.length]; 
        });
    </script>
</body>
</html>

二、按钮状态事件

3. mousedown

触发时机：

当用户在元素上按下任意鼠标按钮时触发。

应用场景：

常用于实现拖动元素、绘制图形等操作的起始点。

示例代码：
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Untitled-1</title>
</head>
<body>
    <h1>鼠标事件-按下</h1>
    <div id="draggable" style="width:100px;height:100px;background-color:red;">拖动我</div>
    <script>
        const draggable = document.getElementById('draggable');
        draggable.addEventListener('mousedown', function () {
            console.log('鼠标按下');
            draggable.style.backgroundColor = 'blue';
        });
    </script>
</body>
</html>

4. mouseup

触发时机：
  • 当用户在元素上释放之前按下的鼠标按钮时触发。
应用场景：
  • 通常与 mousedown 事件配合使用，用于完成拖动、绘制等操作。
示例代码：
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<body>
    <div id="drawArea" style="width: 200px; height: 200px; border: 1px solid black;"></div>
    <script>
        const drawArea = document.getElementById('drawArea');
        drawArea.addEventListener('mousedown', function () {
            console.log('鼠标按下');
            drawArea.style.backgroundColor = 'blue';
        });
        drawArea.addEventListener('mouseup', function () {
            console.log('鼠标释放');
            drawArea.style.backgroundColor = 'red';
        });
    </script>
</body>
</html>

此代码的主要功能是通过监听鼠标在指定div上的按下和释放事件，实现div背景颜色的变化。具体来说：

  • 当用户点击div时，div的背景颜色会变为蓝色，同时在控制台输出"鼠标按下"。
  • 当用户松开鼠标时，div的背景颜色会变为红色，同时在控制台输出"鼠标释放"。

这段代码主要用于演示如何使用JavaScript的事件监听机制来响应用户的鼠标操作，并实时更新网页元素的样式。

三、鼠标移动事件

5. mousemove

触发时机：
  • 当鼠标指针在元素上移动时，会持续触发该事件。
应用场景：
  • 常用于实现鼠标跟随效果、绘制轨迹、实时更新鼠标位置信息等。
示例代码：
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<body>
    <div id="moveArea" style="width: 200px; height: 200px; border: 1px solid black;"></div>
    <p>请在黑色区域内移动鼠标，并查看下面的鼠标位置。</p>
    <p>鼠标位置: (0, 0)</p>
    <script>
        const moveArea = document.getElementById('moveArea');
        moveArea.addEventListener('mousemove', function (event) {
            console.log(`鼠标位置: (${event.offsetX}, ${event.offsetY})`);
            // 使用querySelector选择页面中最后一个<p>标签，并将其文本内容更新为当前鼠标的位置。
            document.querySelector('p:last-of-type').textContent = `鼠标位置: (${event.offsetX}, ${event.offsetY})`;
        });
    </script>
</body>
</html>

这段代码的主要功能是在网页上创建一个200x200像素的黑色边框区域，并实时显示用户在这个区域内的鼠标位置。每当鼠标在该区域内移动时，位置信息会被更新到页面上的最后一个段落标签中，并且在控制台中输出。

6. mouseover、mouseout

触发时机：
  • mouseover当鼠标指针从元素外部移动到元素内部时触发，并且当鼠标进入该元素的子元素时也会触发。mouseout当鼠标指针从元素内部移动到元素外部时触发，并且当鼠标离开该元素的子元素时也会触发。
应用场景：
  • mouseover常用于实现鼠标悬停效果，如显示下拉菜单、改变元素样式等。mouseout通常与 mouseover 事件配合，用于恢复元素的原始样式。
示例代码：
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标悬停切换类</title>
    <style>
        /* 设置div的基本样式 */
        div {
            position: relative;
            display: inline-block;
            place-content: center;
            text-align: center;
            font-size: 20px;
            color: white;
            cursor: pointer;
        }
        /* 定义原始样式 */
        .original {
            width: 180px;
            height: 180px;
            background-color: lightgray;
        }
        /* 定义悬停时的样式 */
        .hovered {
            width: 180px;
            height: 180px;
            background-color: pink;
            border: 2px solid black;
        }
    </style>
</head>
<body>
    <!-- 创建一个div元素，初始应用original样式 -->
    <div id="element" class="original">悬停切换样式</div>
    <script>
        // 获取id为element的div元素
        const element = document.getElementById('element');
        // 添加鼠标悬停事件监听器，切换到hovered样式
        element.addEventListener('mouseover', function () {
            this.classList.remove('original');
            this.classList.add('hovered');
        });
        // 添加鼠标移出事件监听器，切换回original样式
        element.addEventListener('mouseout', function () {
            this.classList.remove('hovered');
            this.classList.add('original');
        });
    </script>
</body>
</html>

这段代码的主要功能是在网页上实现一个简单的鼠标悬停效果。当用户将鼠标悬停在特定的div元素上时，该元素的背景颜色会从浅灰色变为粉色，并且增加一个黑色边框。当鼠标移开时，div元素的样式会恢复到原来的浅灰色背景无边框状态。这是一种常见的交互设计，用于提高用户体验，通过视觉反馈来告知用户他们与页面元素的交互状态。

html 复制代码 
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>悬停下拉菜单示例</title>
    <style>
        .menu {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        .menu-item {
            position: relative;
            display: inline-block;
        }
        .menu-item a {
            display: block;
            padding: 10px;
            color: #fff;
            background-color: #007BFF;
            text-decoration: none;
        }
        .submenu {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            background-color: #007BFF;
            list-style-type: none;
            margin: 0;
            padding: 0;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        }
        .submenu li {
            width: 200px;
        }
        .submenu li a {
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            color: white;
        }
        .submenu li a:hover {
            background-color: #555;
        }
    </style>
</head>
<body>
    <ul class="menu">
        <li class="menu-item">
            <a href="#">菜单项1</a>
            <ul class="submenu">
                <li><a href="#">子菜单项1-1</a></li>
                <li><a href="#">子菜单项1-2</a></li>
                <li><a href="#">子菜单项1-3</a></li>
            </ul>
        </li>
        <li class="menu-item">
            <a href="#">菜单项2</a>
            <ul class="submenu">
                <li><a href="#">子菜单项2-1</a></li>
                <li><a href="#">子菜单项2-2</a></li>
                <li><a href="#">子菜单项2-3</a></li>
            </ul>
        </li>
    </ul>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const menuItems = document.querySelectorAll('.menu-item');
            menuItems.forEach(function (item) {
                item.addEventListener('mouseover', function () {
                    const submenu = this.querySelector('.submenu');
                    if (submenu) {
                        submenu.style.display = 'block';
                    }
                });

                item.addEventListener('mouseout', function () {
                    const submenu = this.querySelector('.submenu');
                    if (submenu) {
                        submenu.style.display = 'none';
                    }
                });
            });
        });
    </script>
</body>
</html>

下面是对 javascript 代码的逐步分解：

  1. document.addEventListener('DOMContentLoaded', function () { ... });

    • 这行代码的作用是监听整个文档是否已经完全加载完毕。只有在文档加载完成后，脚本中的内容才会被执行，确保在操作DOM元素时这些元素已经存在。

  2. const menuItems = document.querySelectorAll('.menu-item');

    • 使用querySelectorAll方法选择所有带有menu-item类名的元素，并将它们存储在一个NodeList对象menuItems中。在这个例子中，menuItems包含了两个菜单项，即"菜单项1"和"菜单项2"。

  3. menuItems.forEach(function (item) { ... });

    • 对于NodeList中的每一个元素（即每个菜单项），执行一次回调函数。回调函数中的参数item代表当前正在处理的菜单项。

  4. item.addEventListener('mouseover', function () { ... });

    • 为每个菜单项添加一个mouseover事件监听器。当鼠标进入菜单项时，会触发回调函数中的代码。

  5. const submenu = this.querySelector('.submenu');

    • 在mouseover事件的回调函数中，this指向触发事件的菜单项。通过querySelector方法，我们在这个菜单项内部查找第一个带有submenu类名的元素，即子菜单。

  6. if (submenu) { submenu.style.display = 'block'; }

    • 如果找到了子菜单（即submenu不为null），则将它的display属性设置为'block'，使子菜单显示出来。

  7. item.addEventListener('mouseout', function () { ... });

    • 为每个菜单项添加一个mouseout事件监听器。当鼠标离开菜单项时，会触发回调函数中的代码。

  8. if (submenu) { submenu.style.display = 'none'; }

    • 同样地，在mouseout事件的回调函数中，如果找到了子菜单，则将其display属性设置为'none'，使子菜单隐藏起来。

7. mouseenter、mouseleave

触发时机：
  • mouseenter当鼠标指针从元素外部移动到元素内部时触发，但当鼠标进入该元素的子元素时不会再次触发。mouseleave当鼠标指针从元素内部移动到元素外部时触发，但当鼠标离开该元素的子元素时不会触发。
应用场景：
  • mouseenter与 mouseover 类似，但不会受子元素影响，适合需要精确控制悬停范围的场景。
  • mouseleave与 mouseout 类似，但不会受子元素影响，常与 mouseenter 配合使用。
示例代码：
html 复制代码 
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>mouseenter 事件示例</title>
    <style>
        .tooltip {
            display: none;
            position: absolute;
            background-color: #007BFF;
            color: white;
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 12px;
        }
        .button-container {
            position: relative;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="button-container">
        <button id="myButton">悬停我</button>
        <div class="tooltip" id="myTooltip">这是一个提示信息</div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const button = document.getElementById('myButton');
            const tooltip = document.getElementById('myTooltip');

            button.addEventListener('mouseenter', function () {
                // 显示提示框
                tooltip.style.display = 'block';
                // 获取按钮的位置，并设置提示框的位置
                const buttonRect = button.getBoundingClientRect();
                tooltip.style.top = `${buttonRect.bottom + window.scrollY}px`;
                tooltip.style.left = `${buttonRect.left + window.scrollX}px`;
            });

            button.addEventListener('mouseleave', function () {
                // 隐藏提示框
                tooltip.style.display = 'none';
            });
        });
    </script>
</body>
</html>

mouseenter 事件与 mouseover 事件的主要区别在于，mouseenter 不会冒泡到其子元素上，而 mouseover 会。这意味着当鼠标进入一个元素时，mouseenter 只会触发一次，而 mouseover 可能在鼠标进入子元素时再次触发。

mouseenter 事件最适合用于需要精确控制事件只在特定元素上触发的场景，而不需要考虑子元素的情况。例如，当你想要在鼠标进入某个按钮时显示一个提示，但不希望在子元素上重复显示这个提示时，可以使用 mouseenter。

在上面的示例中，我们创建了一个按钮和一个提示框。当鼠标进入按钮区域时，使用 mouseenter事件来显示提示框，并根据按钮的位置动态设置提示框的位置，确保提示框显示在按钮下方。当鼠标离开按钮区域时，使用 mouseleave 事件来隐藏提示框。

这里使用 mouseenter 和 mouseleave 事件而不是 mouseover 和 mouseout 事件，是为了避免当鼠标移动到按钮的子元素（如果有）时，提示框被重复显示或隐藏。在这个简单的例子中，按钮没有子元素，但如果有更复杂的结构，mouseenter 和 mouseleave 的非冒泡特性会更显优势。

四、鼠标滚轮事件

8. wheel

触发时机：
  • 当用户滚动鼠标滚轮时触发。
应用场景：
  • 常用于实现页面滚动、缩放元素、切换幻灯片等功能。
示例代码：
html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滚轮事件示例</title>
    <style>
        body {
            height: 2000px; /* 为了能看到滚动效果 */
        }
    </style>
</head>
<body>
<script>
    // 获取body元素
    var body = document.body;

    // 添加滚轮事件监听器
    body.addEventListener('wheel', function(event) {
        // 阻止默认行为
        event.preventDefault();

        // 判断滚轮滚动的方向
        if (event.deltaY > 0) {
            console.log(event.deltaY);
            console.log('向下滚动');
        } else {
            console.log('向上滚动');
        }
    });
</script>
</body>
</html>

这段代码的主要功能是在网页的<body>元素上添加一个滚轮事件监听器，用于检测用户鼠标滚轮的滚动方向，并在控制台中输出滚动方向的信息。需要注意的是，这段代码还阻止了页面的默认滚动行为，因此即使用户尝试滚动鼠标滚轮，页面也不会发生自动的上下滚动。

五、鼠标右键事件

9. contextmenu

触发时机：
  • 当用户在元素上点击鼠标右键时触发。
应用场景：
  • 可用于自定义上下文菜单，替代浏览器默认的右键菜单。
示例代码：
html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>右击事件示例</title>
    <style>
        body {
            height: 2000px;
            /* 为了能看到滚动效果 */
            position: relative;
        }
        #customMenu {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            border: 1px solid #d3d3d3;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
            padding: 5px 0;
            width: 150px;
            z-index: 1000;
        }
        #customMenu div {
            padding: 8px 15px;
            cursor: pointer;
        }
        #customMenu div:hover {
            background-color: #ddd;
        }
    </style>
</head>
<body>

    <div id="customMenu">
        <div onclick="showAlert('选项1')">选项1</div>
        <div onclick="showAlert('选项2')">选项2</div>
        <div onclick="showAlert('选项3')">选项3</div>
    </div>
    <script>
        // 获取body元素，以便在页面上添加事件监听器
        var body = document.body;

        // 获取自定义菜单元素，该元素在用户右击时显示
        var customMenu = document.getElementById('customMenu');

		// 添加右击事件监听器
        body.addEventListener('contextmenu', function (event) {

            // 阻止默认行为（显示浏览器的上下文菜单）
            event.preventDefault();

            // 设置自定义菜单的位置为鼠标点击的位置
            customMenu.style.left = event.pageX + 'px';
            customMenu.style.top = event.pageY + 'px';

            // 显示自定义菜单
            customMenu.style.display = 'block';
        });

        // 添加点击页面其他地方隐藏菜单的事件监听器
        document.addEventListener('click', function (event) {
            if (event.target !== customMenu) {
                customMenu.style.display = 'none';
            }
        });

        // 显示弹窗的函数，用于测试菜单选项
        function showAlert(option) {
            alert('你点击了：' + option);
        }
    </script>
</body>
</html>

六、事件对象

在上述示例中，事件处理函数通常会接收一个事件对象作为参数（如 event）。通过这个事件对象，可以获取与鼠标事件相关的信息，如鼠标的坐标、按下的按钮等。常见的属性包括：

  • clientX 和 clientY：鼠标相对于浏览器窗口可视区域的坐标。

  • offsetX 和 offsetY：鼠标相对于触发事件的元素的坐标。

  • button：表示按下的鼠标按钮，0 代表左键，1 代表中键，2 代表右键。

这些鼠标事件为开发者提供了丰富的交互手段，可以根据具体需求灵活运用，打造出更加生动和交互性强的网页。

相关推荐
木木黄木木1 小时前
html5炫酷3D文字效果项目开发实践
前端·3d·html5
Li_Ning212 小时前
【接口重复请求】axios通过AbortController解决页面切换过快，接口重复请求问题
前端
胡八一2 小时前
Window调试 ios 的 Safari 浏览器
前端·ios·safari
Dontla2 小时前
前端页面鼠标移动监控（鼠标运动、鼠标监控）鼠标节流处理、throttle、限制触发频率（setTimeout、clearInterval）
前端·javascript
再学一点就睡2 小时前
深拷贝与浅拷贝：代码世界里的永恒与瞬间
前端·javascript
CrimsonHu3 小时前
B站首页的 Banner 这么好看，我用原生 JS + 三大框架统统给你复刻一遍！
前端·javascript·css
Enti7c3 小时前
前端表单输入框验证
前端·javascript·jquery
拉不动的猪3 小时前
几种比较实用的指令举例
前端·javascript·面试
麻芝汤圆3 小时前
MapReduce 的广泛应用：从数据处理到智能决策
java·开发语言·前端·hadoop·后端·servlet·mapreduce
与妖为邻3 小时前
自动获取屏幕尺寸信息的html文件
前端·javascript·html
热门推荐
01生活电子常识--删除谷歌浏览器搜索记录02我决定放弃搞 Java 了03如何在WPS和Word/Excel中直接使用DeepSeek功能04基于Matlab的疲劳检测系统设计与实现05DeepSeek各版本说明与优缺点分析06从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑07智能驾驶中预测模块简介08RAG 实践- Ollama+RagFlow 部署本地知识库09DeepSeek RAGFlow构建本地知识库系统10汽车上的各种质量：整备质量、总质量、装载质量、簧上质量、簧下质量