Приостановить событие по умолчанию в jQuery

Question

Я пытаюсь отложить событие по умолчанию или события в скрипте jQuery. Контекст заключается в том, что я хочу отображать сообщение пользователям, когда они выполняют определенные действия (прежде всего, щелчок) в течение нескольких секунд, прежде чем сработает действие по умолчанию.

Псевдо-код: - Пользователь нажимает на ссылку / кнопку / элемент - Пользователь получает всплывающее сообщение о том, что вы покидаете сайт. - сообщение остается на экране в течение X миллисекунд - Действие по умолчанию (может отличаться от ссылки href) запускает

Пока мои попытки выглядят так:

$(document).ready(function() {
    var orgE = $("a").click();
    $("a").click(function(event) {
        var orgEvent = event;
        event.preventDefault();
        // Do stuff
        doStuff(this);

        setTimeout(function() {
            // Hide message
            hideMessage();
            $(this).trigger(orgEvent);
        }, 1000);
    });
});

Конечно, это работает не так, как ожидалось, но может показать, что я пытаюсь сделать.

Я не могу использовать плагины, так как это размещенная среда без онлайн-доступа.

Есть идеи?

Answer 1

Я бы, наверное, сделал что-то подобное.

$("a").click(function(event) {
   event.preventDefault();
   doStuff(this);
   var url = $(this).attr("href");

   setTimeout(function() {
      hideMessage();
      window.location = url;
   }, 1000);
});

Я не уверен, можно ли увидеть url из таймерной функции. Если нет, вам может потребоваться объявить его вне обработчика кликов.

Редактировать: Если вам нужно вызвать событие из функции timed, вы можете использовать нечто похожее на то, что предлагал karim79, хотя я бы сделал несколько изменений.

$(document).ready(function() {
  var slept = false;
  $("a").click(function(event) {
    if(!slept) {
        event.preventDefault();
        doStuff(this);

        var $element = $(this);
        // allows us to access this object from inside the function

        setTimeout(function() {
          hideMessage();
          slept = true;
          $element.click(); //triggers the click event with slept = true
        }, 1000);
        // if we triggered the click event here, it would loop through
        // this function recursively until slept was false. we don't want that.
    } else {
        slept = false; //re-initialize
    }
  });
});

Редактировать: После некоторых испытаний и исследований я не уверен, что на самом деле возможно инициировать исходное событие щелчка элемента <a>. Это представляется возможным для любого элемента, кроме <a>.

Answer 2

Вероятно, лучший способ сделать это - использовать unbind. Что-то вроде:

$(document).ready(function() {
    $("a").click(function(event) {
        event.preventDefault();
        // Do stuff
        this.unbind(event).click();
    });
})

Answer 3

Нечто подобное должно сработать. Добавьте новый класс (предположительно, с более разумным именем, чем выбранное мной) ко всем ссылкам, на которые вы хотите повлиять. Удалите этот класс, когда вы отобразите всплывающее окно, чтобы при повторном вызове .click () ваш код больше не выполнялся, и по умолчанию выполнялось поведение.

$("a").addClass("fancy-schmancy-popup-thing-not-yet-shown").click(function() {
    if ($(this).hasClass("fancy-schmancy-popup-thing-not-yet-shown"))
        return true;

    doStuff();
    $(this).removeClass("fancy-schmancy-popup-thing-not-yet-shown");

    var link = this;
    setTimeout(function() {
      hideMessage();
      $(link).click().addClass("fancy-schmancy-popup-thing-not-yet-shown";
    }, 1000);

    return false;
});

Answer 4

Это может сработать:

$(document).ready(function() {
  $("a").click(function(event) {
    event.preventDefault();
    doStuff(this);

    setTimeout(function() {
      hideMessage();
      $(this).click();
    }, 1000);
  });
});

Примечание: полностью не проверено