onclick和onmousedown事件區別

admin發表於2017-03-08
事件

當滑鼠點選一個元素的時候會觸發onclick事件。

當滑鼠在某個元素中按下時，會觸發onmousedown事件。

這兩個時間從觸發的條件上看上去有所關聯，因為onclick事件是滑鼠按下並鬆開觸發的，這裡麵包含有觸發onmousedown事件條件。下面通過一個程式碼例項檢測一下是否是這樣的。

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>select網址跳轉效果</title>
<script type="text/javascript">
window.onload=function(){
  var first=document.getElementById("first");
  var second=document.getElementById("second");
  var bt=document.getElementById("bt");
  bt.onclick=function(){
    first.innerHTML="onclick事件被觸發";
  }
  bt.onmousedown=function(){
    second.innerHTML="onmousedow事件觸發";
  }
}
</script>
</head>
<body>
<button id="bt">點選測試</button>
<div id="first"></div>
<div id="second"></div>
</body>
</html>

以上程式碼中，當點選按鈕觸發onclick事件的時候，onmousedown事件也被觸發了，可以得出一下結論:

onclick事件=onmousedown事件+onmouseup事件。

以上程式碼成立的條件是，滑鼠按下的地方和滑鼠鬆開的地方是同一個地方，如果滑鼠按下後，把滑鼠挪到另一個地方然後鬆開，這個時候onclick事件不會觸發，只會觸發onmousedown事件。

相關文章