滑鼠點選 INPUT 元素後預設觸發的事件執行順序
阿新 • • 發佈:2019-02-09
所有瀏覽器中,當用戶通過滑鼠操作觸發 click 事件時,事件觸發順序:
1、MouseDown 事件
2、Focus 事件
3、MouseUp 事件
4、Click 事件
可點選測試網頁
測試程式碼如下:
<script>
window.onload = function (){
function stopDefault(e){
e = e || window.event;
(e.preventDefault)
?e.preventDefault()
:e.returnValue = false;
}
function addEvent(el, type, fn){
(el.addEventListener)
? el.addEventListener(type, fn, false)
:(function () {
el.attachEvent("on" + type, function(e){
fn.call(el,e);
});
})();
}
function setEvents(elment){
addEvent(elment,"mousedown",function (e) {
this.value+=' mousedown 事件被觸發';
stopDefault(e);
});
addEvent(elment,"focus",function (e){
this.value+=' focus 事件被觸發';
});
addEvent(elment,"mouseup",function (e){
this.value+=' mouseup 事件被觸發';
});
addEvent(elment,"click",function (e) {
this.value+=' click 事件被觸發';
});
}
setEvents(document.getElementsByTagName("input")[2]);
}
</script>
<ol>
<li>
<h2> 滑鼠預設行為觸發順序 </h2>
<input style="width:100%;" onmousedown="this.value+=' mousedown 事件被觸發 ';" onfocus="this.value+=' focus 事件被觸發 '" onclick="this.value+=' click 事件被觸發 '" onmouseup="this.value+=' mouseUp 事件被觸發 '">
<p>點選文字域後顯示 click 事件相關聯的各個事件觸發順序。</p>
</li>
<li>
<h2> 使用 return false 語句阻止 MouseDown 後續預設行為觸發 </h2>
<input style="width:100%;" onmousedown="this.value+=' mousedown 事件被觸發 ';return false;" onfocus="this.value+=' focus 事件被觸發 '" onclick="this.value+=' click 事件被觸發 '" onmouseup="this.value+=' mouseUp 事件被觸發 '">
<p>點選文字域後沒有繼續執行 focuse 事件內程式,則說明成功阻止了預設行為。</p>
</li>
<li>
<h2>使用 preventDefault 方法阻止 MouseDown 後續預設行為觸發 </h2>
<input style="width:100%;">
<p>點選文字域後沒有繼續執行 focuse 事件內程式,則說明成功阻止了預設行為。</p>
</li>
</ol>
注意:在 IE 瀏覽器中,在 MouseDown 事件的處理函式中,取消瀏覽器預設行為執行後,如果點選的是可獲得焦點的元素 (如 INPUT) ,那麼他依然會獲得焦點並觸發 Focus 事件。
而在非 IE 瀏覽器中,此情況下元素無法獲得焦點,也不會觸發 Focus 事件。