Quel est le contraire de evt.preventDefault ();


185

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


3
Je pense que généralement votre fonction s'exécuterait, puis le comportement par défaut s'exécuterait, donc vous n'appeleriez jamais evt.preventDefault () en premier lieu
Prescott


2
@Nobita - Je ne suis pas si sûr ... que celui-ci soit spécifique à jQuery.
gilly3

1
Wow, merci pour les réponses rapides! Mon problème est cependant que je ne suis pas celui qui déclenche evt.preventDefault () ;. J'exécute une application flash tierce dans une lightbox. Lorsque je ferme la lightbox, ma molette de défilement de page s'arrête. En faisant quelques recherches, j'ai trouvé que cette application flash désactive le défilement de la page en raison d'une fonction de zoom. Alors maintenant, j'essaie de reprendre le défilement de la page une fois l'application fermée. Peut-être y a-t-il une méthode que je peux appeler pour reprendre l'événement de la molette de la souris?
Bryan

Réponses:


90

Selon les commentaires de @Prescott, le contraire de:

evt.preventDefault();

Pourrait être:

Cela équivaut essentiellement à «faire par défaut» , puisque nous ne l'empêchons plus.

Sinon, je suis enclin à vous indiquer les réponses fournies par d'autres commentaires et réponses:

Comment dissocier un écouteur qui appelle event.preventDefault () (en utilisant jQuery)?

Comment réactiver event.preventDefault?

Notez que le second a été accepté avec un exemple de solution, donné par redsquare (posté ici pour une solution directe au cas où cela ne serait pas fermé comme duplicata):

$('form').submit( function(ev) {
     ev.preventDefault();
     //later you decide you want to submit
     $(this).unbind('submit').submit()
});

Je vous remercie! Je me suis gratté la tête pendant un certain temps à ce sujet (je devais m'arrêter et vérifier certaines choses avant de soumettre un formulaire, ne pas soumettre dans certaines circonstances, soumettre dans d'autres).
Katharine Osborne

1
Cela fonctionne mais je ne comprends pas pourquoi la prochaine soumission du formulaire appelle à nouveau la fonction, je pensais que cela la dissocierait définitivement, mais il semble qu'elle ne se dissocie que pour l'appel en cours ... Je ne peux pas l'expliquer, c'est le cas exactement ce que je veux mais ce n'est pas ce à quoi je m'attendais.
Vadorequest

53
function(evt) {evt.preventDefault();}

et son contraire

function(evt) {return true;}

à votre santé!


8
Cela a fonctionné pour moi, mais je me demande si quelqu'un peut expliquer un peu mieux pourquoi?
edhedges

11
Cela n'annule pas preventDefault (), en fait cela fait la même chose que si vous ôtez le return true: rien.
br4nnigan

20

Pour traiter une commande avant de continuer un lien à partir d'un clickévénement dans jQuery:

Par exemple: <a href="http://google.com/" class="myevent">Click me</a>

Empêcher et poursuivre avec jQuery:

$('a.myevent').click(function(event) {
    event.preventDefault();

    // Do my commands
    if( myEventThingFirst() )
    {
      // then redirect to original location
      window.location = this.href;
    }
    else
    {
      alert("Couldn't do my thing first");
    }
});

Ou courez simplement window.location = this.href;après lepreventDefault();


3
Exact, mais cela suppose que le preventDefault est un lien, et non pas touchmove sur le corps du document.
Bangkokian le

4
Ce n'est pas ce que la question posait.
Matt Fletcher

1
Je sais que cela ne répond pas directement à la question, mais je suis heureux que @Bradley ait répondu à cette question car cela a résolu mon problème. :)
Jovanni G il y a

8

J'ai dû retarder la soumission d'un formulaire dans jQuery afin d'exécuter un appel asynchrone. Voici le code simplifié ...

$("$theform").submit(function(e) {
    e.preventDefault();
    var $this = $(this);
    $.ajax('/path/to/script.php',
        {
        type: "POST",
        data: { value: $("#input_control").val() }
    }).done(function(response) {
        $this.unbind('submit').submit();
    });
});

Une autre option dans ce scénario peut être d'utiliser input type = "button" et de se lier à l'événement click au lieu d'utiliser input type = "submit" et de se lier à l'événement submit.
Strixy

8

D'ACCORD ! cela fonctionne pour l'événement de clic:

$("#submit").click(function(e){ 

   e.preventDefault();

  -> block the click of the sumbit ... do what you want

$("#submit").unbind('click').click(); // the html click submit work now !

});


4

Je suggérerais le modèle suivant:

document.getElementById("foo").onsubmit = function(e) {
    if (document.getElementById("test").value == "test") {
        return true;
    } else {
        e.preventDefault();
    }
}

<form id="foo">
    <input id="test"/>
    <input type="submit"/>
</form>

... sauf si je manque quelque chose.

http://jsfiddle.net/DdvcX/


4

Il n'y a pas de méthode opposée event.preventDefault()pour comprendre pourquoi vous devez d'abord regarder ce qui se event.preventDefault()passe lorsque vous l'appelez.

Sous le capot, la fonctionnalité de preventDefault appelle essentiellement un retour false qui arrête toute exécution ultérieure. Si vous connaissez les anciennes méthodes de Javascript, il était autrefois à la mode d'utiliser return false pour annuler des événements sur des éléments tels que les soumissions de formulaires et les boutons utilisant return true (avant même que jQuery ne soit là).

Comme vous l'avez probablement déjà établi sur la base de l'explication simple ci-dessus: le contraire de event.preventDefault()n'est rien. Vous n'empêchez simplement pas l'événement, par défaut le navigateur autorisera l'événement si vous ne l'empêchez pas.

Voir ci-dessous pour une explication:

;(function($, window, document, undefined)) {

    $(function() {
        // By default deny the submit
        var allowSubmit = false;

        $("#someform").on("submit", function(event) {

            if (!allowSubmit) {
                event.preventDefault();

                // Your code logic in here (maybe form validation or something)
                // Then you set allowSubmit to true so this code is bypassed

                allowSubmit = true;
            }

        });
    });

})(jQuery, window, document);

Dans le code ci-dessus, vous remarquerez que nous vérifions si allowSubmit est faux. Cela signifie que nous empêcherons notre formulaire de se soumettre en utilisantevent.preventDefault , puis nous ferons une logique de validation et si nous sommes satisfaits, définissez allowSubmit sur true.

C'est vraiment la seule méthode efficace pour faire le contraire de event.preventDefault()- vous pouvez également essayer de supprimer des événements qui aboutiraient essentiellement au même résultat.


4

Voici quelque chose d'utile ...

Tout d'abord, nous cliquons sur le lien, exécutons du code et effectuons l'action par défaut. Cela sera possible en utilisant event.currentTarget Jetez un œil. Ici, nous allons essayer d'accéder à Google sur un nouvel onglet, mais avant de devoir exécuter du code.

<a href="https://www.google.com.br" target="_blank" id="link">Google</a>

<script type="text/javascript">
    $(document).ready(function() {
        $("#link").click(function(e) {

            // Prevent default action
            e.preventDefault();

            // Here you'll put your code, what you want to execute before default action
            alert(123); 

            // Prevent infinite loop
            $(this).unbind('click');

            // Execute default action
            e.currentTarget.click();
        });
    });
</script>

2

Voici ce que j'ai utilisé pour le définir:

$("body").on('touchmove', function(e){ 
    e.preventDefault(); 
});

Et pour l'annuler:

$("body").unbind("touchmove");

2

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

<a onclick="return clickEvent(event);" href="/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();
}

2

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

À 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 .trigger()vous permet de déclencher des événements sur les éléments - parfois utile.

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

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

1

jquery on () pourrait être une autre solution à cela. escpacialement en ce qui concerne l'utilisation des espaces de noms .

jquery on () est simplement la manière courante de lier les événements (au lieu de bind ()). off () est de les dissocier. et lorsque vous utilisez un espace de noms, 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 la soumission ne soit pas le meilleur exemple, cela peut s'avérer utile en un clic ou en appuyant sur une touche ou autre.


1

Ce n'est pas une réponse directe à la question mais cela peut aider quelqu'un. Mon point est que vous appelez seulement preventDefault () en fonction de certaines conditions car il ne sert à rien d'avoir un événement si vous appelez preventDefault () pour tous les cas. Donc, avoir des conditions if et appeler preventDefault () uniquement lorsque la / les condition / s satisfaite fonctionnera la fonction de la 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

});


0

vous pouvez l'utiliser après la méthode "preventDefault"

// Ici evt.target renvoie l'événement par défaut (par exemple: defult url etc)

var defaultEvent=evt.target;

// Ici, nous sauvegardons l'événement par défaut.

if("true")
{
//activate default event..
location.href(defaultEvent);
}

0

Vous pouvez toujours utiliser ceci joint à un événement de clic dans votre script:

location.href = this.href;

exemple d'utilisation:

jQuery('a').click(function(e) {
    location.href = this.href;
});

-1

ce code a fonctionné pour moi pour ré-instancier l'événement après avoir utilisé:

event.preventDefault(); to disable the event.


event.preventDefault = false;

-2

J'ai utilisé le code suivant. Ça fonctionne bien pour moi.

$('a').bind('click', function(e) {
  e.stopPropagation();
});

2
Comme expliqué dans la documentation de l'API jQuery , cela empêche l'événement de remonter dans l'arborescence DOM, empêchant les gestionnaires parents d'être notifiés de l'événement. Ce n'est pas la même chose que / ou l'opposé de event.preventDefault();
ᴍᴀᴛᴛ ʙᴀᴋᴇʀ

2
Ce n'est pas non plus ce que la question posait.
Matt Fletcher
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.