Comment déballer un écouteur qui appelle un événement.preventDefault () (utilisant jQuery)?
jQuery bascule les appels preventDefault () par défaut, de sorte que les valeurs par défaut ne fonctionnent pas. vous ne pouvez pas cliquer une case à cocher, vous ne pouvez pas cliquer un lien etc
est-il possible de restaurer le gestionnaire par défaut?
15 réponses
dans mon cas:
$('#some_link').click(function(event){
event.preventDefault();
});
$('#some_link').unbind('click');
a fonctionné comme la seule méthode pour restaurer l'action par défaut.
comme vu ici: https://stackoverflow.com/a/1673570/211514
Son assez simple
supposons que vous fassiez quelque chose comme
document.ontouchmove = function(e){ e.preventDefault(); }
maintenant, pour revenir à la situation initiale, faites ce qui suit...
document.ontouchmove = function(e){ return true; }
De cette site web .
il n'est pas possible de restaurer un preventDefault()
mais ce que vous pouvez faire est trick it:)
<div id="t1">Toggle</div>
<script type="javascript">
$('#t1').click(function (e){
if($(this).hasClass('prevented')){
e.preventDefault();
$(this).removeClass('prevented');
}else{
$(this).addClass('prevented');
}
});
</script>
Si vous voulez aller plus loin, vous pouvez même utiliser le bouton déclencheur pour déclencher un événement.
function DoPrevent(e) {
e.preventDefault();
e.stopPropagation();
}
// Bind:
$(element).on('click', DoPrevent);
// UnBind:
$(element).off('click', DoPrevent);
dans certains cas* vous pouvez d'abord return false
au lieu de e.preventDefault()
, puis quand vous voulez restaurer la valeur par défaut à return true
.
* signification quand vous ne vous souciez pas de l'événement bouillonnant et vous n'utilisez pas le e.stopPropagation()
avec e.preventDefault()
voir Aussi la même question (aussi dans le Débordement de la pile)
ou dans le cas d'une case à cocher vous pouvez avoir quelque chose comme:
$(element).toggle(function(){
$(":checkbox").attr('disabled', true);
},
function(){
$(":checkbox").removeAttr('disabled');
})
vous pouvez restaurer l'action par défaut (si C'est un href suivre) en faisant ceci:
window.location = $(this).attr('href');
si c'est un lien, alors $(this).unbind("click");
réactiverait le lien En Cliquant et le comportement par défaut serait restauré.
j'ai créé une démo js fiddle pour montrer comment cela fonctionne:
voici le code du violon JS:
HTML:
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<a href="http://jquery.com">Default click action is prevented, only on the third click it would be enabled</a>
<div id="log"></div>
Javascript:
<script>
var counter = 1;
$(document).ready(function(){
$( "a" ).click(function( event ) {
event.preventDefault();
$( "<div>" )
.append( "default " + event.type + " prevented "+counter )
.appendTo( "#log" );
if(counter == 2)
{
$( "<div>" )
.append( "now enable click" )
.appendTo( "#log" );
$(this).unbind("click");//-----this code unbinds the e.preventDefault() and restores the link clicking behavior
}
else
{
$( "<div>" )
.append( "still disabled" )
.appendTo( "#log" );
}
counter++;
});
});
</script>
Désactiver:
document.ontouchstart = function(e){ e.preventDefault(); }
Activer:
document.ontouchstart = function(e){ return true; }
la meilleure façon de le faire en utilisant namespace. Il est un moyen sûr et sécurisé. Ici. rb est l'espace de noms qui assure que la fonction unbind fonctionne sur ce keydown particulier mais pas sur les autres.
$(document).bind('keydown.rb','Ctrl+r',function(e){
e.stopImmediatePropagation();
return false;
});
$(document).unbind('keydown.rb');
ref1: http://idodev.co.uk/2014/01/safely-binding-to-events-using-namespaces-in-jquery /
j'ai eu un problème où j'avais besoin de l'action par défaut seulement après qu'une certaine action personnalisée (activer des champs d'entrée autrement désactivés sur un formulaire) soit terminée. J'ai enveloppé l'action par défaut (submit()) en un propre, fonction récursive (dosubmit()).
var prevdef=true;
var dosubmit=function(){
if(prevdef==true){
//here we can do something else first//
prevdef=false;
dosubmit();
}
else{
$(this).submit();//which was the default action
}
};
$('input#somebutton').click(function(){dosubmit()});
utiliser un booléen:
let prevent_touch = true;
document.documentElement.addEventListener('touchmove', touchMove, false);
function touchMove(event) {
if (prevent_touch) event.preventDefault();
}
j'utilise ceci dans une application web Progressive pour empêcher le défilement/zoom sur certaines 'pages' tout en permettant sur d'autres.
vous pouvez définir pour former 2 classes. Après avoir défini votre script JS à l'un d'eux, lorsque vous voulez désactiver votre script, vous supprimez simplement la classe avec script lié de ce formulaire.
HTML:
<form class="form-create-container form-create"> </form>
JS
$(document).on('submit', '.form-create', function(){
..... ..... .....
$('.form-create-container').removeClass('form-create').submit();
});
$('#my_elementtt').click(function(event){
trigger('click');
});
Je ne suis pas sûr que vous soyez ce que vous voulez dire: Mais voici une solution pour un problème similaire (et peut-être le même)...
j'utilise souvent preventDefault() pour intercepter des objets. Cependant: ce n'est pas la seule méthode d'interception... souvent vous voulez juste une "question" à la suite de laquelle le comportement continue comme avant, ou s'arrête. Dans un cas récent, j'ai utilisé la solution suivante:
$("#content").on('click', '#replace', (function(event){
return confirm('Are you sure you want to do that?')
}));
en gros ,le "prevent default" est destiné à intercepter et faire autre chose: le "confirmer" est conçu pour une utilisation dans ... bien - confirmation de la!