一、鼠标按下事件的基本绑定方法
我们知道，在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
微信扫一扫 
支付宝扫一扫 