Une fois que j'ai déclenché un evt.preventDefault()
, comment puis-je reprendre les actions par défaut?
Une fois que j'ai déclenché un evt.preventDefault()
, comment puis-je reprendre les actions par défaut?
Réponses:
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()
});
function(evt) {evt.preventDefault();}
et son contraire
function(evt) {return true;}
à votre santé!
return true
: rien.
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();
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();
});
});
event.preventDefault(); //or event.returnValue = false;
et son opposé (standard):
event.returnValue = true;
source: https://developer.mozilla.org/en-US/docs/Web/API/Event/returnValue
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.
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.
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>
Voici ce que j'ai utilisé pour le définir:
$("body").on('touchmove', function(e){
e.preventDefault();
});
Et pour l'annuler:
$("body").unbind("touchmove");
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();
}
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');
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.
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
});
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);
}
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;
J'ai utilisé le code suivant. Ça fonctionne bien pour moi.
$('a').bind('click', function(e) {
e.stopPropagation();
});
event.preventDefault()
;