jQuery委托mouseenter事件只在点击时触发

jQuery delegated mouseenter event only fires on click

本文关键字：委托 mouseenter 事件 jQuery      更新时间：2023-09-26

我试图将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
}

一定是什么蠢事。有人知道发生了什么吗?

你试过关机再开机吗?现在我有了。这似乎是Chrome或Chrome开发工具的不当行为。我已经使用这个浏览器窗口和标签页很长时间了，并且在开发页面的过程中一直在重复使用它。尽管已经刷新和硬刷新了页面，但它仍然出现故障。我猜是有什么地方出了问题，因为在我关闭Chrome并重新打开它之后，它的行为是正确的。

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

尝试在classTimeMouseEnter()函数中绑定click事件，这样可以保证事件处理的顺序。

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

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>

相关文章：