JavaScript和JQuery的滑鼠mouse事件冒泡處理_javascript技巧

簡單的老鼠移動事件：

進入

複製程式碼 程式碼如下:

mouseenter：不冒泡
mouseover: 冒泡

不論滑鼠指標穿過被選元素或其子元素，都會觸發 mouseover 事件
只有在滑鼠指標穿過被選元素時，才會觸發 mouseenter 事件

移出

複製程式碼 程式碼如下:

mouseleave: 不冒泡
mouseout：冒泡

不論滑鼠指標離開被選元素或任何子元素，都會觸發 mouseout 事件
只有在滑鼠指標離開被選元素時，才會觸發 mouseleave 事件

我們透過一個案例觀察下問題：

給一個嵌套的層級綁定mouseout事件，會發現mouseout事件與想像的不一樣

複製程式碼 程式碼如下:

外部子元素

內部子元素

0

   

0

我們發現一個問題mouseout事件：

1.無法阻止冒泡
2.在內部的子元素上也會觸發

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

1.為了阻止mouseover和mouseout的反覆觸發，這裡要用到event物件的一個屬性relatedTarget，這個屬性就是用來判斷 mouseover和mouseout事件目標節點的相關節點的屬性。簡單的來說就是當觸發mouseover事件時，relatedTarget屬性代表的就是滑鼠剛離開的那個節點，當觸發mouseout事件時它代表的是滑鼠移向的那個物件。由於MSIE不支援這個屬性，不過它有代替的屬性，分別是 fromElement和toElement。
2.有了這個屬性，我們就能夠清楚的知道我們的滑鼠是從哪個物件移過來，又是要移動到哪裡去了。這樣我們就能夠透過判斷這個相關聯的物件是否在我們要觸發事件的物件的內部，或者是不是就是這個物件本身。透過這個判斷我們就能夠合理的選擇是否真的要觸發事件。
3.這裡我們也用到了一個用來檢查一個物件是否包含在另外一個物件中的方法，contains方法。 MSIE和FireFox分別提供了檢查的方法，這裡封裝了一個函數。

jQuery的處理也是如出一轍

複製程式碼 程式碼如下:

jQuery.each({
        mouseenter: "滑鼠停留",
        mouseleave: "滑鼠移開",
        指針輸入：“指針”，
        Pointerleave: "指標輸出"
    }, 函數(原始, 修復) {
        jQuery.event.special[orig] = {
            delegateType: 修復,
            綁定類型：修復，

            句柄：函數（事件）{
                var ret，
                    目標=這個，
                    相關性=事件.相關目標，
                    handleObj = event.handleObj;

                // 相關 mouseenter/leave，相關內容若位於目標之外，則呼叫處理程序。
                // 注意：若滑鼠離開/進入瀏覽器窗口，則沒有相關目標
                if (!相關 || (相關 !== 目標 && !jQuery.contains(目標, 相關))) {
                    event.type = handleObj.origType;
                    ret = handleObj.handler.apply(this, 參數);
                    event.type = 修補;
                }
                回 ret;
            }
        };
    });