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

　這篇文章主要介紹了JavaScript和JQuery的 滑鼠mouse事件冒泡處理,本文總結出了mouse事件的一些定論,並分別給出了JavaScript和JQuery測試程式碼,需要的朋友可以參考下

　　簡單的滑鼠移動事件：

　　進入

　　程式碼如下:

　　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: "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;

　　}

　　};

　　});