Событие JavaScript mouseup вызывается несколько раз за один клик - PullRequest
1 голос
/ 22 ноября 2011

Может кто-нибудь сказать мне, почему приведенный ниже код javascript приводит к тому, что renewSession () вызывается 7 раз после одного нажатия?

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

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

Ответы [ 2 ]

6 голосов
/ 22 ноября 2011

Вероятно, это потому, что событие 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();
    });
});
1 голос
/ 22 ноября 2011

Селектор * соответствует 7 элементам ...

События в html всплывают в DOM-дереве, если явно не указано, что он остановлен, и, следовательно, событие будет вызываться для каждого элемента, идущего вверх по дереву, которое соответствуетселектор (в данном случае все они!).

Если это не ваше предполагаемое поведение, либо используйте более конкретный селектор, либо вызовите метод stopPropagation .

...