mouseenter事件只會觸發一次,觸發對象是注冊對象或者注冊對象的子元素
mouseover事件可以觸發多次,觸發對象是注冊對象或者注冊對象的子元素
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <p>不論鼠標指針穿過被選元素或其子元素,都會觸發 mouseover 事件。</p> <p>只有在鼠標指針穿過被選元素時,才會觸發 mouseenter 事件。</p> <div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left"> <h2 style="background-color:white;">被觸發的 Mouseover 事件:<span></span></h2> </div> <div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right"> <h2 style="background-color:white;">被觸發的 Mouseenter 事件:<span></span></h2> </div> <script> var x = 0,y = 0; var div1 = document.getElementsByClassName("over")[0]; div1.addEventListener("mouseover",function(){ var span = this.getElementsByTagName("span")[0] span.innerText = (x +=1); span.style.cssText = "border:2px red solid;"; },false); var div2 = document.getElementsByClassName("enter")[0]; div2.addEventListener("mouseenter",function(){ var span = this.getElementsByTagName("span")[0] span.innerText = (y +=1); span.style.cssText = "border:2px red solid;"; },false); </script></body></html>
以上這篇淺談JQ中mouseover和mouseenter的區別就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持武林網。
新聞熱點
疑難解答