Quel est le contraire de evt.preventDefault() ;

Question

Une fois que j'ai tiré un evt.preventDefault() Comment puis-je reprendre les actions par défaut ?

Answer 1

Aucune des solutions ne m'a aidé ici et j'ai fait cela pour résoudre ma situation.

<a onclick="return clickEvent(event);" href="http://stackoverflow.com/contact-us">

Et la fonction clickEvent() ,

function clickEvent(event) {
    event.preventDefault();
    // do your thing here

    // remove the onclick event trigger and continue with the event
    event.target.parentElement.onclick = null;
    event.target.parentElement.click();
}

Answer 2

Je suppose que le "contraire" serait de simuler un événement. Vous pourriez utiliser .createEvent()

En suivant l'exemple de Mozilla :

function simulateClick() {
  var evt = document.createEvent("MouseEvents");
  evt.initMouseEvent("click", true, true, window,
    0, 0, 0, 0, 0, false, false, false, false, 0, null);
  var cb = document.getElementById("checkbox"); 
  var cancelled = !cb.dispatchEvent(evt);
  if(cancelled) {
    // A handler called preventDefault
    alert("cancelled");
  } else {
    // None of the handlers called preventDefault
    alert("not cancelled");
  }
}

Réf : document.createEvent

---

jQuery a .trigger() pour que vous puissiez déclencher des événements sur les éléments - parfois utile.

$('#foo').bind('click', function() {
      alert($(this).text());
});

$('#foo').trigger('click');

Answer 3

Ce n'est pas une réponse directe à la question mais cela peut aider quelqu'un. Ce que je veux dire, c'est que vous n'appelez preventDefault() qu'en fonction de certaines conditions, car il est inutile d'avoir un événement si vous appelez preventDefault() dans tous les cas. Donc avoir des conditions if et appeler preventDefault() seulement quand la/les condition(s) est/sont satisfaite(s) fera fonctionner la fonction de manière habituelle pour les autres cas.

$('.btnEdit').click(function(e) {

   var status = $(this).closest('tr').find('td').eq(3).html().trim();
   var tripId = $(this).attr('tripId');

  if (status == 'Completed') {

     e.preventDefault();
     alert("You can't edit completed reservations");

 } else if (tripId != '') {

    e.preventDefault();
    alert("You can't edit a reservation which is already attached to a trip");
 }
 //else it will continue as usual

});

Answer 4

Jquery on() pourrait être une autre solution à ce problème, surtout lorsqu'il s'agit de l'utilisation du espaces de noms .

jquery on() est simplement la façon actuelle de lier les événements (au lieu de bind()). off() permet de les délier. et lorsque vous utilisez un espace de nom, vous pouvez ajouter et supprimer plusieurs événements différents.

$( selector ).on("submit.my-namespace", function( event ) {
    //prevent the event
    event.preventDefault();

    //cache the selector
    var $this = $(this);

    if ( my_condition_is_true ) {
        //when 'my_condition_is_true' is met, the binding is removed and the event is triggered again.
        $this.off("submit.my-namespace").trigger("submit");
    }
});

maintenant, avec l'utilisation de l'espace de noms, vous pouvez ajouter plusieurs de ces événements et être en mesure de les supprimer, en fonction de vos besoins bien que submit ne soit pas le meilleur exemple, cela pourrait être utile sur un clic ou une pression de touche ou autre

Answer 5

Dans un flux synchrone, vous appelez e.preventDefault() seulement quand vous en avez besoin :

a_link.addEventListener('click', (e) => {
   if( conditionFailed ) {
      e.preventDefault();
      // return;
   }

   // continue with default behaviour i.e redirect to href
});

Dans un flux asynchrone, vous avez plusieurs possibilités, mais l'une d'entre elles, assez courante, consiste à utiliser window.location :

a_link.addEventListener('click', (e) => {
     e.preventDefault(); // prevent default any way

     const self = this;

     call_returning_promise()
          .then(res => {
             if(res) {
               window.location.replace( self.href );
             }
          });
});

Vous pouvez certainement rendre le flux ci-dessus synchrone en utilisant async - await