JavaScript mouseup 事件在单击时被多次触发答案

【问题标题】：JavaScript mouseup Event Being Fired Multiple Times On Single ClickJavaScript mouseup 事件在单击时被多次触发
【发布时间】：2011-11-21 22:24:55
【问题描述】：

谁能告诉我为什么下面的 javascript 代码会导致 renewSession() 在单击后被调用 7 次？

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

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

【问题讨论】：

从性能和维护的角度来看，*选择器并不好。

标签： javascript jquery model-view-controller mouseup

【解决方案1】：

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

你可以使用：

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

为了防止多次调用。

已编辑以解决来自 thiag0 的评论：

感谢您的快速响应...我正在尝试做的是每次用户点击网站时调用 renewSession() 以保持会话处于活动状态。此解决方案可防止 renewSession 在一次单击中被多次调用，但会阻止用户单击的实际意图。无论如何要解决这个问题？

您可以只定位body 元素；只要允许事件通过 DOM 树传播（只要您不在单击的元素之间的元素上调用 event.stopPropagation()（或“mouseup”），那么事件将传播到 @ 987654327@. 所以我建议使用：

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

【讨论】：

感谢您的快速响应...我正在尝试做的是每次用户点击网站时调用 renewSession() 以保持会话处于活动状态。此解决方案可防止 renewSession 在一次单击中被多次调用，但会阻止用户单击的实际意图。有什么办法可以解决这个问题？

【解决方案2】：

* 选择器匹配 7 个元素...

html 中的事件会在 DOM 树中冒泡，除非明确告知要停止，因此事件将针对向上匹配选择器的每个元素触发（在本例中为所有元素！）。

如果这不是您的预期行为，请使用更具体的选择器，或调用 stopPropagation 方法。

【讨论】：

感谢您的快速响应...我正在尝试做的是每次用户点击网站时调用 renewSession() 以保持会话处于活动状态。此解决方案可防止 renewSession 在一次单击中被多次调用，但会阻止用户单击的实际意图。有什么办法可以解决这个问题？