Question

我正在尝试将jQuery mouseenter事件连接到容器中的一堆链接。我还想取消链接的导航，以便我点击点击事件。突然之间，mouseenter处理程序仅在单击链接后执行。它仍然是鼠标输入事件，因为如果我将鼠标悬停在链接上，并再次单击它不会触发，它只会在每个条目发生一次。但只有我点击。当我将鼠标移到它上面时没有任何反应。我创建了一个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

您是否尝试将其关闭并重新打开？我现在有。它似乎是Chrome或Chrome开发人员工具行为不端。我已经将浏览器窗口和标签打开了很长时间，并在我开发页面时重复使用它。尽管刷新并且刷新了页面，但它仍在继续出现故障。我想有些事情已经完成了，因为在我关闭Chrome并重新打开它之后，它的行为正确。

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

Answer 2

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

Answer 3

如果我理解正确，它似乎按预期工作。

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

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

3 个答案: