說(shuō)在前面：先說(shuō)一下兩者之間的區(qū)別，假設(shè)當(dāng)前元素為element，mouseover事件具有冒泡特性，也就是說(shuō)無(wú)論滑鼠是從別的元素移動(dòng)到element或者是從element的子元素移動(dòng)到element都會(huì)觸發(fā)mouseover事件。對(duì)於mouseenter事件，該事件沒(méi)有冒泡特性，也就是說(shuō)只有滑鼠穿過(guò)該事件的時(shí)候才會(huì)觸發(fā)mouseenter，如果滑鼠一直在element內(nèi)部“遊走”，則不會(huì)觸發(fā)mouseenter。具體的例子可以參考這個(gè)例子點(diǎn)擊打開(kāi)連結(jié)。

前提說(shuō)完了，那怎麼使用mouseover實(shí)作mouseenter呢！

我們先來(lái)看看jQuery是怎麼實(shí)現(xiàn)的，以下是jQuery中實(shí)作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;
		}
	};
});

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

? ? ? ? 那麼看第二個(gè)條件，related!==target && !jQuery.contains(target,related)。我們可以看到target=this;那麼target指向的就是element，而related指向的則是由哪一個(gè)元素移動(dòng)到element的，我們知道m(xù)ouseover和mouseenter的區(qū)別在於，在從子元素中移動(dòng)到element的時(shí)候是否觸發(fā)相應(yīng)的事件。這個(gè)情況就可以用related!==target && jQuery.contains(target,related)來(lái)過(guò)濾掉。

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

? ? ? ? 當(dāng)然了這是jQuery下的實(shí)現(xiàn)，如果想用原生的js程式碼實(shí)現(xiàn)，可以結(jié)合relatedTarget實(shí)現(xiàn)。當(dāng)然在IE中也許我們會(huì)用到fromElement以及toElement結(jié)合的方式來(lái)實(shí)現(xiàn)。

? ? ? ? 這是自己學(xué)習(xí)過(guò)程中的記錄了，我的理解可能有誤，希望大家在評(píng)論中能夠提出不足之處。

以上是jquery中的mouseenter的深入理解的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！