jquery中的mouseenter的深入理解

說在前面：先說一下兩者之間的區別，假設當前元素為element，mouseover事件具有冒泡特性，也就是說無論滑鼠是從別的元素移動到element或者是從element的子元素移動到element都會觸發mouseover事件。對於mouseenter事件，該事件沒有冒泡特性，也就是說只有滑鼠穿過該事件的時候才會觸發mouseenter，如果滑鼠一直在element內部“遊走”，則不會觸發mouseenter。具體的例子可以參考這個例子點擊打開連結。

前提說完了，那怎麼使用mouseover實作mouseenter呢！

我們先來看看jQuery是怎麼實現的，以下是jQuery中實作mouseenter以及mouseleave的程式碼：

jQuery.each({
	mouseenter: "mouseover",
	mouseleave: "mouseout"
}, 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;
		}
	};
});

其他的倒不用看，關鍵在於if 判斷語句以及其中的組合條件，我們可以看到如果related是空或undefined，則表示滑鼠已經移動到window上面了，那麼這時肯定已經穿過了該元素。為什麼這麼肯定，我們需要知道的是，底層這個判斷語句是在mouseover事件中處理的，related返回的就是滑鼠是從哪一個元素移動到element的，如果是window，那麼肯定是「穿過」了element .

        那麼看第二個條件，related!==target && !jQuery.contains(target,related)。我們可以看到target=this;那麼target指向的就是element，而related指向的則是由哪一個元素移動到element的，我們知道mouseover和mouseenter的區別在於，在從子元素中移動到element的時候是否觸發相應的事件。這個情況就可以用related!==target && jQuery.contains(target,related)來過濾掉。

        透過上一段的解釋，我們知道這個條件的功能是，如果是從別的元素移動到element的時候，判斷是否是從element的子元素移動過來的，如果是的話，則不觸發事件，如果不是的話(!jQuery.contains(target,related))，則說明是從element的「外部」移動過來的，那麼就表示滑鼠已經穿過了element，就需要觸發事件。

        當然了這是jQuery下的實現，如果想用原生的js程式碼實現，可以結合relatedTarget實現。當然在IE中也許我們會用到fromElement以及toElement結合的方式來實現。

        這是自己學習過程中的記錄了，我的理解可能有誤，希望大家在評論中能夠提出不足之處。

以上是jquery中的mouseenter的深入理解的詳細內容。更多資訊請關注PHP中文網其他相關文章！