Javascript鼠标事件汇总（附带实例）

鼠标事件是 Web 开发中最常用的一类事件，Javascript 常用的鼠标事件如下表所示。

表：常用鼠标事件
事件	描述
click	单击鼠标时触发此事件
dblclick	双击鼠标时触发
mousedown	按下鼠标按键时触发
mouseup	释放鼠标按键时触发
mousemove	移动鼠标时触发
mouseover	鼠标进入元素时触发
mouseout	鼠标离开元素时触发
mouseenter	类似 mouseover，但不冒泡
mouseleave	类似 mouseout，但不冒泡
contextmenu	当上下文菜单即将出现时触发

下面通过案例演示 mousedown、mouseup、mousemove 和 mouseover 事件的用法。

【实例 1】产品信息展示。

<div id="box">
    <ul>
        <li><img src="images/01.jpg" alt="" /></li>
        <li><img src="images/02.jpg" alt="" /></li>
        <li><img src="images/03.jpg" alt="" /></li>
        <li><img src="images/04.jpg" alt="" /></li>
        <li><img src="images/05.jpg" alt="" /></li>
    </ul>
</div>
<script>
    var box = document.getElementById("box");
    box.onmouseover = function (e) {
        if (e.target.nodeName == 'img') {
            var imgSrc = e.target.getAttribute('src');
            box.style.backgroundImage = "url(images/" + imgSrc.substring(7, 9) + "big.jpg)";
        }
    }
</script>

在程序中：

第 12 行代码为 img 的祖先元素 ul 绑定鼠标进入事件及其处理程序。当鼠标进入页面中任意的 img 元素时，都会触发 ul 的 mouseover 事件；
第 13 行代码通过 nodeName 属性判断事件源是不是图片，若是，则将当前 img 元素对应的大图显示在页面中。

程序在 Chrome 浏览器中的运行效果如下图所示：

图 1 运行效果

【实例 2】鼠标跟随。

<img src="fendou.jpg" alt="">
<script>
    var pic = document.querySelector('img');
    document.addEventListener('mousemove', function(e) {
        var x = e.clientX;
        var y = e.clientY;
        pic.style.left = x + 'px';
        pic.style.top = y + 'px';
    });
</script>

在程序中，第 4 行代码为 document 文档绑定鼠标移动事件及其处理程序。当鼠标在页面移动时，将鼠标对象的 clientX 和 clientY 属性值赋值给图片元素的 left 和 top 属性。因此鼠标移动时，图片和鼠标的坐标保持一致。

程序在 Chrome 浏览器中的运行效果如下图所示：

图 2 运行效果

【实例 3】鼠标拖曳。

<div id="div1"></div>
<script>
    var oDiv = document.getElementById('div1');
    oDiv.onmousedown = function(ev) {
        var disX = ev.clientX - this.offsetLeft;
        var disY = ev.clientY - this.offsetTop;
        document.onmousemove = function(ev) {
            oDiv.style.left = ev.clientX - disX + 'px';
            oDiv.style.top = ev.clientY - disY + 'px';
        };
        document.onmouseup = function() {
            document.onmousemove = null;
        };
        return false;
    }
</script>

程序中：

第 4 行代码为 div 元素绑定鼠标按下事件及其处理程序；
第 5、6 行代码获取鼠标按下位置距离 div 元素的水平和垂直距离；
第 7~10 行代码在鼠标按下事件中，为 document 绑定鼠标移动事件及其处理程序，当鼠标在页面移动时，设置 div 元素的 left 和 top 值，使它跟随鼠标移动；
第 11~13 行代码在鼠标按下事件中为 document 绑定鼠标释放事件及其处理程序，当鼠标释放时，取消 document 绑定的鼠标移动事件，此时 div 不再跟随鼠标移动。

提示，实例 3 中的 mousemove 和 mouseup 事件需要在 mousedown 事件触发后才能触发。

Javascript鼠标事件汇总（附带实例）

相关文章