一次单击多次触发JavaScript mouseup事件

Question

有人可以告诉我，为什么下面的javascript代码一次单击后会导致renewSession（）被调用7次吗？

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

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

Answer 1

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

您可以使用：

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

防止多次通话。

---

编辑以解决thiag0的评论：

感谢您的快速响应...我想做的是每当用户单击该站点以保持会话活动时调用renewSession（）。 此解决方案可防止一次单击即可多次调用renewSession，但可以防止触发用户点击的实际意图。 无论如何要解决这个问题？

您可以只针对body元素； 只要事件被允许通过DOM树传播（只要您不对单击（或“鼠标”编辑的）元素之间的元素调用event.stopPropagation() ，那么事件将传播到的body ，所以我建议使用：

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

Answer 2

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

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

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