快捷導(dǎo)航

JavaScript和JQuery的鼠標(biāo)mouse事件冒泡處理

更新時(shí)間：2015年06月19日 09:12:59 投稿：junjie

這篇文章主要介紹了JavaScript和JQuery的鼠標(biāo)mouse事件冒泡處理,本文總結(jié)出了mouse事件的一些定論,并分別給出了JavaScript和JQuery測(cè)試代碼,需要的朋友可以參考下

簡(jiǎn)單的鼠標(biāo)移動(dòng)事件：

進(jìn)入

mouseenter：不冒泡

mouseover: 冒泡

不論鼠標(biāo)指針穿過(guò)被選元素或其子元素，都會(huì)觸發(fā) mouseover 事件
只有在鼠標(biāo)指針穿過(guò)被選元素時(shí)，才會(huì)觸發(fā) mouseenter 事件

移出

復(fù)制代碼代碼如下:

mouseleave: 不冒泡

mouseout：冒泡

不論鼠標(biāo)指針離開(kāi)被選元素還是任何子元素，都會(huì)觸發(fā) mouseout 事件
只有在鼠標(biāo)指針離開(kāi)被選元素時(shí)，才會(huì)觸發(fā) mouseleave 事件

我們通過(guò)一個(gè)案例觀察下問(wèn)題：

給一個(gè)嵌套的層級(jí)綁定mouseout事件，會(huì)發(fā)現(xiàn)mouseout事件與想象的不一樣

復(fù)制代碼代碼如下:

<!DOCTYPE html><div class="out overout" style="width:40%;height:120px; margin:0 15px;background-color:#D6EDFC;float:left;" data-mce-style="width: 40%; height: 120px; margin: 0 15px; background-color: #d6edfc; float: left;"><p style="border:1px solid red" data-mce-style="border: 1px solid red;">外部子元素</p><div class="in overout" style="width:60%;background-color:#FFCC00;margin:10px auto;" data-mce-style="width: 60%; background-color: #ffcc00; margin: 10px auto;"><p style="border:1px solid red" data-mce-style="border: 1px solid red;">內(nèi)部子元素</p><p id="inshow">0</p>
</div><p id="outshow">0</p>
</div><script type="text/javascript">

var i = 0;
var k = 0;

    document.querySelectorAll('.out')[0].addEventListener('mouseout',function(e){
        document.querySelectorAll("#inshow")[0].textContent = (++i)
       e.stopPropagation();
    },false)

   document.querySelectorAll('.in')[0].addEventListener('mouseout',function(){
       document.querySelectorAll("#outshow")[0].textContent = (++k)
    },false)

</script>

我們發(fā)現(xiàn)一個(gè)問(wèn)題mouseout事件：

1.無(wú)法阻止冒泡
2.在內(nèi)部的子元素上也會(huì)觸發(fā)

同樣的問(wèn)題還有mouseover事件，那么在stopPropagation方法失效的情況下我們要如何停止冒泡呢？

1.為了阻止mouseover和mouseout的反復(fù)觸發(fā)，這里要用到event對(duì)象的一個(gè)屬性relatedTarget，這個(gè)屬性就是用來(lái)判斷 mouseover和mouseout事件目標(biāo)節(jié)點(diǎn)的相關(guān)節(jié)點(diǎn)的屬性。簡(jiǎn)單的來(lái)說(shuō)就是當(dāng)觸發(fā)mouseover事件時(shí)，relatedTarget屬性代表的就是鼠標(biāo)剛剛離開(kāi)的那個(gè)節(jié)點(diǎn)，當(dāng)觸發(fā)mouseout事件時(shí)它代表的是鼠標(biāo)移向的那個(gè)對(duì)象。由于MSIE不支持這個(gè)屬性，不過(guò)它有代替的屬性，分別是 fromElement和toElement。
2.有了這個(gè)屬性，我們就能夠清楚的知道我們的鼠標(biāo)是從哪個(gè)對(duì)象移過(guò)來(lái)，又是要移動(dòng)到哪里去了。這樣我們就能夠通過(guò)判斷這個(gè)相關(guān)聯(lián)的對(duì)象是否在我們要觸發(fā)事件的對(duì)象的內(nèi)部，或者是不是就是這個(gè)對(duì)象本身。通過(guò)這個(gè)判斷我們就能夠合理的選擇是否真的要觸發(fā)事件。
3.這里我們還用到了一個(gè)用于檢查一個(gè)對(duì)象是否包含在另外一個(gè)對(duì)象中的方法，contains方法。MSIE和FireFox分別提供了檢查的方法，這里封裝了一個(gè)函數(shù)。

jQuery的處理也是如出一轍

復(fù)制代碼代碼如下:

jQuery.each({
        mouseenter: "mouseover",
        mouseleave: "mouseout",
        pointerenter: "pointerover",
        pointerleave: "pointerout"
    }, function(orig, fix) {
        jQuery.event.special[orig] = {
            delegateType: fix,
            bindType: fix,

            handle: function(event) {
                var ret,
                    target = this,
                    related = event.relatedTarget,
                    handleObj = event.handleObj;

                // For mousenter/leave call the handler if related is outside the target.
                // NB: No relatedTarget if the mouse left/entered the browser window
                if (!related || (related !== target && !jQuery.contains(target, related))) {
                    event.type = handleObj.origType;
                    ret = handleObj.handler.apply(this, arguments);
                    event.type = fix;
                }
                return ret;
            }
        };
    });

您可能感興趣的文章: