JavaScript mouseup事件被触发多次在一次点击

JavaScript mouseup Event Being Fired Multiple Times On Single Click

本文关键字：一次 JavaScript 事件 mouseup      更新时间：2023-09-26

有人能告诉我为什么下面的javascript代码导致renewSession()在一次点击后被调用7次吗?

$(document).ready(function () {
    $("*").mouseup(function () {
        renewSession();
    });
});
function renewSession() {
    $.ajax({
        url: "/Account/RenewSession",
        type: "POST"
    });
}

可能是因为mouseup事件通过DOM树向上传播，而您将处理程序应用于文档中的每个元素。所以它会在第一个元素上触发，然后是父元素，等等，直到它到达html(或body，如果不每次检查，我永远不会完全记住)。

你可以使用:

$(document).ready(function () {
    $("*").mouseup(function (e) {
        e.stopPropagation();
        renewSession();
    });
});

防止多次呼叫。

编辑来处理来自thiag0的评论:

感谢您的快速回复…我要做的是调用renewSession()每次用户点击网站保持会话存活。这个解决方案可以防止在一次点击中多次调用renewSession，但可以防止用户点击的实际意图被触发。如何绕过这个问题?

你可以只针对body元素;只要允许事件通过DOM树传播(只要您没有在单击的元素(或'mouseup'-ed)之间的元素上调用event.stopPropagation())，那么事件将传播到body。所以我建议使用:

$(document).ready(function () {
    $("body").mouseup(function () {
        renewSession();
    });
});

*选择器匹配7个元素…

html中的事件会弹出DOM树，除非被明确告知停止，因此该事件将被触发到树中与选择器匹配的每个元素(在这种情况下是所有元素!)

如果这不是你想要的行为，请使用更具体的选择器，或者调用stopPropagation方法。

相关文章：