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

Question

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

$(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()点击元素之间的元素(或'mouseup'ed),那么事件就会传播到body.所以我'建议使用:

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