Event.preventDefault () kullandıktan sonra bir olay nasıl tetiklenir

Bir olayı kovmaya hazır olana kadar tutmak istiyorum örn.

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

   e.preventDefault(); 

   // do lots of stuff

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

}

run()Yukarıda açıklanan işleve eşdeğer mi?

Hayır! Etkinlik iptal edildikten sonra iptal edilir.

Özel kodunuzun zaten çalışıp çalışmadığını belirlemek için bir bayrak kullanarak etkinliği daha sonra yeniden başlatabilirsiniz - bunun gibi (lütfen açık ad alanı kirliliğini dikkate almayın):

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');
});

Daha genel bir varyant (küresel ad alanı kirliliğinden kaçınmanın ek yararı ile) şunlar olabilir:

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

Kullanımı:

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

PromiseDestekli süper minimalist jQuery eklentisi :

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

Kullanımı:

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

Kabul edilen cevabın daha yeni bir versiyonu.

Kısa versiyon:

$('#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 */
    }

});

Böyle bir şey için iyi bir kullanım örneği, çalışan bazı eski form koduna sahip olabileceğiniz yerdir, ancak formu göndermeden önce e-posta adresi doğrulaması gibi bir şey ekleyerek formu geliştirmeniz istenir. Arka uç form posta kodunu kazmak yerine, bir API yazabilir ve ardından formun geleneksel POST yapmasına izin vermeden önce bu API'yı vurmak için ön uç kodunuzu güncelleyebilirsiniz.

Bunu yapmak için, burada yazdıklarıma benzer bir kod uygulayabilirsiniz:

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

    }

});

Gibi bir şey yapabilirsin

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

Özelliği isDefaultPreventedşu şekilde geçersiz kıl :

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

IMHO, olayı tam olarak aynı verilerle almanın en eksiksiz yoludur.

Kullanmak mümkündür currentTargetarasında event. Örnek form gönderme işlemine nasıl devam edileceğini gösterir. Aynı şekilde onclicközellik vb.

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

  // code

  event.currentTarget.submit();
});

Sadece yapma e.preventDefault(); ya da koşullu gerçekleştirin.

Kesinlikle ne zaman değiştiremezsin orijinal olay eylemi gerçekleşir.

Orijinal UI etkinliğini bir süre sonra "yeniden oluşturmak" istiyorsanız (diyelim ki, AJAX isteği için geri aramada), başka bir şekilde (vzwick'in cevabında olduğu gibi) taklit etmeniz gerekir ... böyle bir yaklaşımın kullanılabilirliğini sorgular.

Daha yeni bir cevap ustaca kullanır jQuery.one()

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

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

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

"çok fazla" eşzamansız bir şey yapmadığı sürece bu kesinlikle gereksizdir - olay her işleyiciyi sırayla çağırır, bu nedenle bir üst öğede bir onklick olayı varsa, bu onclik- olay tamamen işledi. javascript burada olay işlemeyi "durdurmayı" zorunlu kılan bir tür "çoklu iş parçacığı" yapmaz. Sonuç: Bir olayı yalnızca aynı işleyicide devam ettirmek için "duraklatmak" hiçbir anlam ifade etmiyor.

"sürü" halinde olduğunu , bu asenkron bir şey bu yaptıkları (Eşzamansız şeyler) ve her şey sırayla gibi biz ilk paragrafa geri geldiği (onları bahave yapmalıdır ne yapacağını Eşzamansız şeyler engeller olarak da mantıklı değil )

Kullandığım yaklaşım şudur:

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

Bir çapa etiketi ile çalışmanız durumunda kabul edilen çözüm çalışmaz. Bu durumda, aradıktan sonra bağlantıyı tekrar tıklayamazsınız e.preventDefault(). Çünkü jQuery tarafından oluşturulan tıklama olayı sadece yerel tarayıcı olaylarının üstünde bir katman. Dolayısıyla, bir tutturma etiketinde 'tıklama' etkinliğini tetiklemek bağlantıyı izlemez. Bunun yerine jquery-simulate gibi bir kütüphane kullanabilirsiniz. , yerel tarayıcı etkinliklerini başlatmanıza izin veren .

Bununla ilgili daha fazla ayrıntı bu bağlantıda bulunabilir

Başka bir çözüm, olay dinleyicisinde window.setTimeout kullanmak ve etkinliğin işlemi bittikten sonra kodu çalıştırmaktır. Gibi bir şey...

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

Bekleme umurumda olmadığından dönem için 0 kullanıyorum .

Bu konunun eski olduğunu biliyorum ama katkıda bulunabileceğimi düşünüyorum. Bu davranışı zaten biliyorsanız, belirli bir öğedeki bir olayın varsayılan davranışını işleyici işlevinizde istediğiniz zaman tetikleyebilirsiniz. Örneğin, sıfırlama düğmesindeki click olayını tetiklediğinizde, aslında en yakın formdaki sıfırlama işlevini varsayılan davranış olarak çağırırsınız. İşleyici işlevinizde, cancelDefault işlevini kullandıktan sonra, işleyici kodunuzdaki herhangi bir yere en yakın formdaki sıfırlama işlevini çağırarak varsayılan davranışı geri çağırabilirsiniz.

Bu örnek yardımcı olabilir, bazı bağlantılara "özel onay popin" ekler ("$ .ui.Modal.confirm" kodunu saklıyorum, sadece orijinal eylemi yürüten geri arama için bir örnek):

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