1. 程式人生 > >滑鼠事件 onmouseenter 和 onmouseover 的區別

滑鼠事件 onmouseenter 和 onmouseover 的區別

滑鼠事件以一下程式碼為例

<div onmouseenter="add()" id="add" style="border:1px solid red">123

    <div onmouseenter="delect()" id="delect" style="border:1px solid red">456</div>
</div>
<script>
function add(){
console.log('father');
}
function delect(){
console.log('son');
}

</script>

當為onmouseenter時不會冒泡,及不會重複觸發父級事件,在進入父級時也不會觸發子級事件。

當為onmouseover時會冒泡,只要進入到標籤內就會觸發標籤內所有子集標籤的事件,且在移動過程中父級標籤會重複觸發,出現連續觸發的問題,可以用原生js方法阻止事件冒泡,具體方法就不總結了。