鼠标按下事件的详解

一、鼠标按下事件的基本绑定方法

我们知道，在Web中，JavaScript通过捕捉鼠标事件唤醒用户的活动，点击鼠标就是最常见的一种事件。那么如何在JavaScript中绑定鼠标按下事件呢？
可以直接使用HTML的onclick属性：

也可以使用DOM的addEventListener方法：

button.addEventListener('click', function(){
    alert('hi');
});

但是要注意，在使用addEventListener时，需要将触发事件的对象作为第一个参数传入。

二、鼠标按下事件的三个重要参数

在了解基本绑定方法之后，我们来看看鼠标按下事件发生时会产生哪些重要参数。在JavaScript中，鼠标按下事件有三个关键的变量：

event.screenX/Y：相对于整个屏幕的距离
event.clientX/Y：相对于浏览器窗口的距离
event.target：鼠标指针的目标

具体每个参数的含义我们来分别看一下：

1、event.screenX/Y：
screenX/Y属性返回鼠标指针相对于用户屏幕左上角的水平和垂直距离。其值大于或等于0，是整数，以屏幕左上角为基准点，其单位为像素。即使用户在屏幕上滚动了文档，该值也不会改变。

2、event.clientX/Y：
clientX/Y属性返回鼠标指针相对于文档的左上角的水平和垂直距离，单位为像素。但是有一点需要注意的是，这个位置的计算是相对于浏览器窗口而言的，因此如果文档已经滚动，浏览器窗口并不在文档的左上角，那么结果就会和event.screenX/Y的计算结果不同。

3、event.target:
当鼠标按下时，触发事件的对象称之为事件的target（目标），即活动的元素。例如，如果在页面的文本框上点击鼠标，那么鼠标事件的目标对象就是这个文本框。

三、鼠标按下事件的常见应用场景

鼠标按下事件是比较常用的事件类型，这里介绍几个常见的应用场景。

1、拖拽：
拖拽是Web开发中非常常见的应用场景，通过捕捉鼠标按下事件，记录鼠标指针相对于元素的位置差，实现元素的拖动功能。

2、画板：
通过监听鼠标按下事件、移动事件以及鼠标释放事件，可以实现一个简单的画板功能，在HTML5中还有canvas元素，可以更加方便地实现画板功能。

3、菜单：
在Web页面中，我们经常会遇到鼠标右键弹出菜单的效果。可以通过监听鼠标按下事件，判断鼠标的按钮状态，以及鼠标的位置信息，来实现自定义菜单。

这些都是鼠标按下事件的常见应用场景，读者也可以尝试这些应用场景的实现，提高自己的编程技能。

四、完整代码示例

下面是一个完整的鼠标按下事件的代码示例，包括应用场景中拖拽功能的简单实现：

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>鼠标按下事件的示例</title>
    <style>
        #dragDiv{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="dragDiv"></div>
</body>
<script>
    var objDrag = document.getElementById("dragDiv");
    objDrag.onmousedown = function(ev){
        ev = ev || event;
        var disX = ev.clientX - this.offsetLeft;
        var disY = ev.clientY - this.offsetTop;
        document.onmousemove = function(ev){
            ev = ev || event;
            objDrag.style.left = ev.clientX - disX + 'px';
            objDrag.style.top = ev.clientY - disY + 'px';
        };
        document.onmouseup = function(){
            document.onmousemove = null;
            document.onmouseup = null;
        };
        return false;
    };
</script>
</html>

原创文章，作者：DDRM，如若转载，请注明出处：https://www.506064.com/n/135575.html

鼠标按下事件的详解

一、鼠标按下事件的基本绑定方法

二、鼠标按下事件的三个重要参数

三、鼠标按下事件的常见应用场景

四、完整代码示例

相关推荐

发表回复