jQuery 委托的 mouseenter 事件仅在单击时触发

Question

我正在尝试将 jQuery mouseenter 事件连接到容器中的一堆 link。我还想取消 link 的导航，所以我连接了点击事件。突然之间，mouseenter 处理程序仅在单击 link 后才执行。它仍然是鼠标输入事件，因为如果我将鼠标悬停在 link 上并再次单击它不会触发，每次输入只会发生一次。但前提是我点击。当我将鼠标移到它上面时没有任何反应。我创建了一个 jsdfiddle 来尝试显示问题，但我无法在那里重现它。它按预期工作。这是我的代码：

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

接线：

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

如果我理解正确的话，它似乎可以正常工作。

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>

Answer 2

尝试在classTimeMouseEnter()函数中绑定点击事件，这样应该能保证事件处理的顺序。

Answer 3

您是否尝试过将其关闭并重新打开？我现在有。它似乎是 Chrome 或 Chrome 开发人员工具行为不当。我在该页面上打开浏览器 window 和选项卡已经很长时间了，并且在我开发页面时重复使用它。尽管已经刷新并硬刷新了页面，它仍然继续出现故障。我猜有些东西出了问题，因为在我关闭 Chrome 并重新打开它后，它的行为正常。

编辑：通过在 mouseenter 处理程序中设置断点，命中断点，然后在执行暂停时按 F5 刷新页面似乎可以重现。

jQuery 委托的 mouseenter 事件仅在单击时触发

jQuery delegated mouseenter event only fires on click

javascript

jquery

google-chrome

google-chrome-devtools