淺談JQ中mouseover和mouseenter的區(qū)別
更新時間:2016年09月13日 15:06:22 投稿:jingxian
下面小編就為大家?guī)硪黄獪\談JQ中mouseover和mouseenter的區(qū)別。小編覺得挺不錯的,現在就分享給大家,也給大家做個參考。
mouseenter事件只會觸發(fā)一次,觸發(fā)對象是注冊對象或者注冊對象的子元素
mouseover事件可以觸發(fā)多次,觸發(fā)對象是注冊對象或者注冊對象的子元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <p>不論鼠標指針穿過被選元素或其子元素,都會觸發(fā) mouseover 事件。</p> <p>只有在鼠標指針穿過被選元素時,才會觸發(fā) mouseenter 事件。</p> <div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left"> <h2 style="background-color:white;">被觸發(fā)的 Mouseover 事件:<span></span></h2> </div> <div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right"> <h2 style="background-color:white;">被觸發(fā)的 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的區(qū)別就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 關于事件mouseover ,mouseout ,mouseenter,mouseleave的區(qū)別
- 快速移動鼠標觸發(fā)問題及解決方法(ECharts外部調用保存為圖片操作及工作流接線mouseenter和mouseleave)
- Jquery利用mouseenter和mouseleave實現鼠標經過彈出層且可以點擊
- 為非IE瀏覽器添加mouseenter,mouseleave事件的實現代碼
- 跨瀏覽器的 mouseenter mouseleave 以及 compareDocumentPosition的使用說明
- javascript 兼容FF的onmouseenter和onmouseleave的代碼
- javascript中mouseenter與mouseover的異同
相關文章
通過JQuery實現win8一樣酷炫的動態(tài)磁貼效果(示例代碼)
相信大家喜歡這個界面無非也是喜歡它的動態(tài)磁貼。剛好今天研究了一下如何通過JQuery在網頁上模仿這種效果,就貼出來給大家噴一下。雖然是一些很低級的技術,但是也希望有需要的朋友可以參考下2013-07-07jquery 中多條件選擇器,相對選擇器,層次選擇器的區(qū)別
jquery 中多條件選擇器,相對選擇器,層次選擇器的區(qū)別介紹,需要的朋友可以參考下2012-07-07jQuery Easy UI中根據第一個下拉框選中的值設置第二個下拉框是否可以編輯
這篇文章主要介紹了jQuery Easy UI中根據第一個下拉框選中的值設置第二個下拉框是否可以編輯的相關資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-11-11淺談JSON和JSONP區(qū)別及jQuery的ajax jsonp的使用
文章從JSON和JSONP區(qū)別開始講起,用實例來對比他們之間的不同之處,然后詳細講解了jQuery中的ajax jsonp的使用并給出了示例及詳細參數說明。這里推薦給大家,希望對小伙伴能有所幫助2014-11-11