一、鼠標按下事件的基本綁定方法
我們知道，在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/zh-hant/n/135575.html
微信掃一掃 
支付寶掃一掃 