jQuery委托mouseenter事件僅在單擊時觸發

Question

我正在嘗試將jQuery mouseenter事件連接到容器中的一堆鏈接。 我也想取消鏈接的導航，所以我要連接click事件。 突然，mouseenter處理程序僅在單擊鏈接后才執行。 仍然是鼠標進入事件，因為如果我將鼠標懸停在鏈接上，然后再次單擊，則不會觸發，每次輸入僅發生一次。 但只有當我單擊時。 當我將鼠標移到鼠標上方時，什么也沒有發生。 我創建了一個jsdfiddle嘗試顯示該問題，但是我無法在那里重現它。 它按預期工作。 這是我的代碼：

<div>
    <a name="lnkClassTime" href="#">@classTime.ClassTimeHour</a>
</div>

Wireup：

this.attachSchedule = function () {
    _$classSchedules = $("#classSchedules");

    //..wire up other events

    _$classSchedules.on("mouseenter", "a[name='lnkClassTime']", classTimeMouseEnter);
    _$classSchedules.on("click", "a[name='lnkClassTime']", classTimeClicked);
}

function classTimeClicked() {
    //Fires when I click the link
}

function classTimeMouseEnter() {
    //Only fires if I click the link
}

這一定是愚蠢的。 誰能知道發生了什么事？

Answer 1

您是否嘗試過將其關閉然后重新打開？ 我現在有。 似乎是Chrome或Chrome開發人員工具的行為異常。 我已經在頁面上長時間打開了瀏覽器窗口和選項卡，並在開發頁面時重用了它。 盡管刷新並硬刷新了頁面，但頁面仍繼續出現故障。 我猜是有些意外了，因為在我關閉Chrome並重新打開它之后，它的行為正常。

編輯：通過在mouseenter處理程序中設置一個斷點，擊中該斷點，然后在執行暫停的情況下按F5刷新頁面，似乎可以重現。

Answer 2

嘗試在classTimeMouseEnter()函數中綁定click事件，該事件應確保事件處理的順序。

Answer 3

如果我理解正確，它似乎正在按預期工作。

 var clickCount = 0; var enterCount = 0; var $container = $("#container"); $container.on("mouseenter", "a[name='lnkClassTime']", classTimeMouseEnter); $container.on("click", "a[name='lnkClassTime']", classTimeClicked); function classTimeClicked(){ $("#clicked").text(++clickCount); } function classTimeMouseEnter(){ $("#entered").text(++enterCount); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <div> <div><a href="#" name="lnkClassTime">8:00 am</a></div> </div> <div> <div><a href="#" name="lnkClassTime">10:00 am</a></div> </div> </div> <div id="output"> <div id="clicked"></div> <div id="entered"></div> </div>