淺談JQ中mouseover和mouseenter的區(qū)別
mouseenter事件只會(huì)觸發(fā)一次,觸發(fā)對(duì)象是注冊(cè)對(duì)象或者注冊(cè)對(duì)象的子元素
mouseover事件可以觸發(fā)多次,觸發(fā)對(duì)象是注冊(cè)對(duì)象或者注冊(cè)對(duì)象的子元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <p>不論鼠標(biāo)指針穿過(guò)被選元素或其子元素,都會(huì)觸發(fā) mouseover 事件。</p> <p>只有在鼠標(biāo)指針穿過(guò)被選元素時(shí),才會(huì)觸發(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ū)別就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- 關(guān)于事件mouseover ,mouseout ,mouseenter,mouseleave的區(qū)別
- 快速移動(dòng)鼠標(biāo)觸發(fā)問(wèn)題及解決方法(ECharts外部調(diào)用保存為圖片操作及工作流接線mouseenter和mouseleave)
- Jquery利用mouseenter和mouseleave實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)彈出層且可以點(diǎn)擊
- 為非IE瀏覽器添加mouseenter,mouseleave事件的實(shí)現(xiàn)代碼
- 跨瀏覽器的 mouseenter mouseleave 以及 compareDocumentPosition的使用說(shuō)明
- javascript 兼容FF的onmouseenter和onmouseleave的代碼
- javascript中mouseenter與mouseover的異同
相關(guān)文章
jQuery 實(shí)現(xiàn)左右兩側(cè)菜單添加、移除功能
本文通過(guò)實(shí)例代碼給大家分享了jQuery 實(shí)現(xiàn)左右兩側(cè)菜單添加、移除功能,需要的朋友參考下吧2018-01-01通過(guò)JQuery實(shí)現(xiàn)win8一樣酷炫的動(dòng)態(tài)磁貼效果(示例代碼)
相信大家喜歡這個(gè)界面無(wú)非也是喜歡它的動(dòng)態(tài)磁貼。剛好今天研究了一下如何通過(guò)JQuery在網(wǎng)頁(yè)上模仿這種效果,就貼出來(lái)給大家噴一下。雖然是一些很低級(jí)的技術(shù),但是也希望有需要的朋友可以參考下2013-07-07jquery 中多條件選擇器,相對(duì)選擇器,層次選擇器的區(qū)別
jquery 中多條件選擇器,相對(duì)選擇器,層次選擇器的區(qū)別介紹,需要的朋友可以參考下2012-07-07jQuery Easy UI中根據(jù)第一個(gè)下拉框選中的值設(shè)置第二個(gè)下拉框是否可以編輯
這篇文章主要介紹了jQuery Easy UI中根據(jù)第一個(gè)下拉框選中的值設(shè)置第二個(gè)下拉框是否可以編輯的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-11-11jQuery簡(jiǎn)單實(shí)現(xiàn)仿京東分類導(dǎo)航層效果
這篇文章主要介紹了jQuery簡(jiǎn)單實(shí)現(xiàn)仿京東分類導(dǎo)航層效果,涉及jQuery針對(duì)鼠標(biāo)事件的響應(yīng)及頁(yè)面元素動(dòng)態(tài)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06淺談JSON和JSONP區(qū)別及jQuery的ajax jsonp的使用
文章從JSON和JSONP區(qū)別開(kāi)始講起,用實(shí)例來(lái)對(duì)比他們之間的不同之處,然后詳細(xì)講解了jQuery中的ajax jsonp的使用并給出了示例及詳細(xì)參數(shù)說(shuō)明。這里推薦給大家,希望對(duì)小伙伴能有所幫助2014-11-11jQuery的DOM操作之刪除節(jié)點(diǎn)示例
如果文檔中某一個(gè)元素多余,那么應(yīng)將其刪除。jQuery提供了兩種刪除節(jié)點(diǎn)的方法,remove()方法和empty()方法下面為大家詳細(xì)介紹下2014-01-01