Suspend Default Event in jQuery

Question

I am trying to delay the default event or events in a jQuery script. The context is that I want to display a message to users when they perform certain actions (click primarily) for a few seconds before the default action fires.

Pseudo-code: - User clicks link/button/element - User gets a popup message stating 'You are leaving site' - Message remains on screen for X milliseconds - Default action (can be other than href link too) fires

So far, my attempts look like this:

$(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);
    });
});

Of course, this doesn't work as expected, but may show what I'm trying to do.

I am unable to use plugins as ths is a hosted environment with no online access.

Any ideas?

Answer 1

Something like this should do the trick. Add a new class (presumably with a more sensible name than the one I've chosen) to all the links you want to be affected. Remove that class when you've shown your popup, so when you call .click() again your code will no longer run, and the default behavior will occur.

$("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 2

Probably the best way to do this is to use unbind. Something like:

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