Как вызвать событие после использования event.preventDefault ()

Я хочу провести мероприятие до тех пор, пока я не буду готов его запустить, например

$('.button').live('click', function(e){

   e.preventDefault(); 

   // do lots of stuff

   e.run() //this proceeds with the normal event    

}

Есть ли эквивалент run()функции, описанной выше?

Нет. Как только событие было отменено, оно отменяется.

Впрочем, вы можете повторно запустить событие позже, используя флаг, чтобы определить, уже запущен ваш пользовательский код или нет - например, это (пожалуйста, игнорируйте явное загрязнение пространства имен):

var lots_of_stuff_already_done = false;

$('.button').on('click', function(e) {
    if (lots_of_stuff_already_done) {
        lots_of_stuff_already_done = false; // reset flag
        return; // let the event bubble away
    }

    e.preventDefault();

    // do lots of stuff

    lots_of_stuff_already_done = true; // set flag
    $(this).trigger('click');
});

Более обобщенный вариант (с дополнительным преимуществом предотвращения загрязнения глобального пространства имен) может быть:

function onWithPrecondition(callback) {
    var isDone = false;

    return function(e) {
        if (isDone === true)
        {
            isDone = false;
            return;
        }

        e.preventDefault();

        callback.apply(this, arguments);

        isDone = true;
        $(this).trigger(e.type);
    }
}

Использование:

var someThingsThatNeedToBeDoneFirst = function() { /* ... */ } // do whatever you need
$('.button').on('click', onWithPrecondition(someThingsThatNeedToBeDoneFirst));

Бонусный супер-минималистичный плагин jQuery с Promiseподдержкой:

(function( $ ) {
    $.fn.onButFirst = function(eventName,         /* the name of the event to bind to, e.g. 'click' */
                               workToBeDoneFirst, /* callback that must complete before the event is re-fired */
                               workDoneCallback   /* optional callback to execute before the event is left to bubble away */) {
        var isDone = false;

        this.on(eventName, function(e) {
            if (isDone === true) {
                isDone = false;
                workDoneCallback && workDoneCallback.apply(this, arguments);
                return;
            }

            e.preventDefault();

            // capture target to re-fire event at
            var $target = $(this);

            // set up callback for when workToBeDoneFirst has completed
            var successfullyCompleted = function() {
                isDone = true;
                $target.trigger(e.type);
            };

            // execute workToBeDoneFirst callback
            var workResult = workToBeDoneFirst.apply(this, arguments);

            // check if workToBeDoneFirst returned a promise
            if (workResult && $.isFunction(workResult.then))
            {
                workResult.then(successfullyCompleted);
            }
            else
            {
                successfullyCompleted();
            }
        });

        return this;
    };
}(jQuery));

Использование:

$('.button').onButFirst('click',
    function(){
        console.log('doing lots of work!');
    },
    function(){
        console.log('done lots of work!');
    });

Более свежая версия принятого ответа.

Краткая версия:

$('#form').on('submit', function(e, options) {
    options = options || {};

    if ( !options.lots_of_stuff_done ) {
        e.preventDefault();
        $.ajax({
            /* do lots of stuff */
        }).then(function() {
            // retrigger the submit event with lots_of_stuff_done set to true
            $(e.currentTarget).trigger('submit', { 'lots_of_stuff_done': true });
        });
    } else {
        /* allow default behavior to happen */
    }

});

Хороший вариант использования для чего-то подобного - это когда у вас может быть какой-то устаревший код формы, который работает, но вас попросили улучшить форму, добавив что-то вроде проверки адреса электронной почты перед отправкой формы. Вместо того, чтобы копаться в почтовом коде серверной формы, вы можете написать API, а затем обновить свой код переднего плана, чтобы сначала использовать этот API, прежде чем позволить форме выполнять традиционный POST.

Для этого вы можете реализовать код, подобный тому, что я написал здесь:

$('#signup_form').on('submit', function(e, options) {
    options = options || {};

    if ( !options.email_check_complete ) {

        e.preventDefault(); // Prevent form from submitting.
        $.ajax({
            url: '/api/check_email'
            type: 'get',
            contentType: 'application/json',
            data: { 
                'email_address': $('email').val() 
            }
        })
        .then(function() {
            // e.type === 'submit', if you want this to be more dynamic
            $(e.currentTarget).trigger(e.type, { 'email_check_complete': true });
        })
        .fail(function() {
            alert('Email address is not valid. Please fix and try again.');
        })

    } else {

        /**
             Do traditional <form> post.
             This code will be hit on the second pass through this handler because
             the 'email_check_complete' option was passed in with the event.
         */

        $('#notifications').html('Saving your personal settings...').fadeIn();

    }

});

Вы можете сделать что-то вроде

$(this).unbind('click').click();

Переопределите свойство isDefaultPreventedследующим образом:

$('a').click(function(evt){
  evt.preventDefault();

  // in async handler (ajax/timer) do these actions:
  setTimeout(function(){
    // override prevented flag to prevent jquery from discarding event
    evt.isDefaultPrevented = function(){ return false; }
    // retrigger with the exactly same event data
    $(this).trigger(evt);
  }, 1000);
}

ИМХО, это наиболее полный способ перезапуска события с точно такими же данными.

Можно использовать currentTargetиз event. Пример показывает, как приступить к отправке формы. Точно так же вы можете получить функцию из onclickатрибута и т. Д.

$('form').on('submit', function(event) {
  event.preventDefault();

  // code

  event.currentTarget.submit();
});

Просто не выполняйте e.preventDefault();, или выполняйте это условно.

Вы, конечно, не можете изменить, когда происходит исходное событие.

Если вы хотите «воссоздать» исходное событие пользовательского интерфейса через некоторое время (скажем, в обратном вызове для запроса AJAX), вам просто нужно будет подделать его другим способом (как в ответе vzwick) ... хотя я бы Вопрос в юзабилити такого подхода.

Более свежий ответ умело использует jQuery.one()

$('form').one('submit', function(e) {
    e.preventDefault();
    // do your things ...

    // and when you done:
    $(this).submit();
});

https://stackoverflow.com/a/41440902/510905

до тех пор, пока "много вещей" не делает что-то асинхронное, это абсолютно ненужно - событие будет вызывать каждый обработчик по пути в последовательности, поэтому, если на родительском элементе происходит событие onklick, оно срабатывает после onclik- Событие ребенка обработано полностью. javascript здесь не выполняет какую-то «многопоточность», что делает «остановку» обработки событий необходимой. Вывод: «приостанавливать» событие, просто чтобы возобновить его в том же обработчике, не имеет никакого смысла.

если «много вещей» является чем-то асинхронным, это также не имеет смысла, поскольку мешает асинхронным вещам делать то, что они должны делать (асинхронные вещи), и заставляет их вести себя так, как будто все в порядке (где мы возвращаемся к моему первому абзацу) )

Подход, который я использую, заключается в следующем:

$('a').on('click', function(event){
    if (yourCondition === true) { //Put here the condition you want
        event.preventDefault(); // Here triggering stops
        // Here you can put code relevant when event stops;
        return;
    }
    // Here your event works as expected and continue triggering
    // Here you can put code you want before triggering
});

Принятое решение не будет работать, если вы работаете с тегом привязки. В этом случае вы не сможете снова щелкнуть ссылку после звонка e.preventDefault(). Это потому, что событие click, сгенерированное jQuery, это просто слой поверх событий собственного браузера. Таким образом, запуск события click для тега привязки не приведет к переходу по ссылке. Вместо этого вы можете использовать библиотеку типа jquery-simulate , которая позволит вам запускать собственные события браузера.

Подробнее об этом можно узнать по этой ссылке

Другое решение - использовать window.setTimeout в прослушивателе событий и выполнить код после завершения процесса события. Что-то вроде...

window.setTimeout(function() {
  // do your thing
}, 0);

Я использую 0 для периода, так как меня не волнует ожидание.

Я знаю, что эта тема старая, но я думаю, что могу внести свой вклад. Вы можете в любое время запустить поведение по умолчанию для определенного элемента в своей функции-обработчике, если вы уже знаете это поведение. Например, когда вы запускаете событие click для кнопки сброса, вы фактически вызываете функцию сброса в ближайшей форме в качестве поведения по умолчанию. В вашей функции обработчика после использования функции protectDefault вы можете вызвать поведение по умолчанию, вызвав функцию сброса в ближайшей форме в любом месте кода вашего обработчика.

Если этот пример может помочь, добавьте «пользовательское подтверждение popin» на некоторые ссылки (я сохраняю код «$ .ui.Modal.confirm», это просто пример обратного вызова, который выполняет исходное действие):

//Register "custom confirm popin" on click on specific links
$(document).on(
    "click", 
    "A.confirm", 
    function(event){
        //prevent default click action
        event.preventDefault();
        //show "custom confirm popin"
        $.ui.Modal.confirm(
            //popin text
            "Do you confirm ?", 
            //action on click 'ok'
            function() {
                //Unregister handler (prevent loop)
                $(document).off("click", "A.confirm");
                //Do default click action
                $(event.target)[0].click();
            }
        );
    }
);