web-dev-qa-db-fra.com

Comment dissocier un écouteur qui appelle event.preventDefault () (à l'aide de jQuery)?

jquery bascule les appels preventDefault () par défaut, afin que les valeurs par défaut ne fonctionnent pas ... vous ne pouvez pas cliquer sur une case à cocher, vous ne pouvez pas cliquer sur un lien, etc.

est-il possible de restaurer le gestionnaire par défaut?

javascriptjqueryeventspreventdefaultevent-bubbling
126
user188049

Dans mon cas:

$('#some_link').click(function(event){
    event.preventDefault();
});

$('#some_link').unbind('click'); a été la seule méthode pour restaurer l'action par défaut.

Vu ici: https://stackoverflow.com/a/1673570/211514

76
klaus

C'est assez simple

Supposons que vous fassiez quelque chose comme

document.ontouchmove = function(e){ e.preventDefault(); }

maintenant, pour revenir à la situation initiale, procédez comme suit:.

document.ontouchmove = function(e){ return true; }

De ce site web .

53
foxybagga

Il n’est pas possible de restaurer une preventDefault() mais vous pouvez le tromper :)

<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 de déclenchement pour déclencher un événement.

16
Val
function DoPrevent(e) {
  e.preventDefault();
  e.stopPropagation();
}

// Bind:
$(element).on('click', DoPrevent);

// UnBind:
$(element).off('click', DoPrevent);
10
Atara

dans certains cas *, vous pouvez initialement return false au lieu de e.preventDefault(), puis lorsque vous souhaitez restaurer la valeur par défaut à return true.

* Signification quand l'événement ne bouillonne pas et que vous n'utilisez pas e.stopPropagation() avec e.preventDefault() 

Voir aussi question similaire (également dans le dépassement de 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');
})
9
adardesign

s'il s'agit d'un lien, alors $(this).unbind("click"); réactivera le clic de lien et le comportement par défaut sera 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>
2
Rahul Gupta

La meilleure façon de le faire en utilisant un espace de noms. C'est un moyen sûr et sécurisé. Ici, .rb est l’espace de nom qui garantit que la fonction unsind ne fonctionne pas sur cette touche particulière, 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/

ref2: http://jqfundamentals.com/chapter/events

2
Rajkumar Bansal

Désactiver:

document.ontouchstart = function(e){ e.preventDefault(); }

Activer:

document.ontouchstart = function(e){ return true; }
1
Brynner Ferreira

Testez ce code, je pense résoudre votre problème:

event.stopPropagation();

Référence

1
Alireza MH

J'ai eu un problème où je n'avais besoin de l'action par défaut qu'après une action personnalisée (activer les champs de saisie autrement désactivés sur un formulaire). J'ai enveloppé l'action par défaut (submit ()) dans une fonction propre et 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()});
0
Gyula

Utilisez un booléen:

let prevent_touch = true;
document.documentElement.addEventListener('touchmove', touchMove, false);
function touchMove(event) { 
    if (prevent_touch) event.preventDefault(); 
}

J'utilise cela dans une application Web progressive pour empêcher le défilement/le zoom sur certaines "pages" et les autres.

0
TennisVisuals

Vous pouvez définir pour former 2 classes. Une fois que vous avez défini votre script JS sur l’un d’eux, lorsque vous souhaitez le désactiver, supprimez simplement la classe avec le 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();

});
0
Dumitru Boaghi