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>