Empêcher l'action onclick avec jQuery

il y a quelques liens avec l'événement onclick actions

<a href="#" onclick="alert('panic!')">Let's panic</a>
<a href="#" onclick="alert('panic!')" disabled="disabled">I can't panic no more</a>

J'ai besoin de prévenir les cas actons d'exécution sur les liens avec désactivé attribut sans enlever onclick actions.

$('a[disabled]').click(function(e){
  e.stopPropagation();
  return false;
});

Ce code ne me permet.

mise à jour Même ce code ne fonctionne pas

<html><head><script type='text/javascript' src='jquery-1.3.2.js'></script></head>
<body>
<a href='#' onclick="alert('HA-ha!')" disabled="disabled" class="disabled">TEST</a>
<script type="text/javascript">
    $('a[disabled], a.disabled').click(function(e){
        console.log('override?');
        e.stopImmediatePropagation();           
            e.preventDefault();
        e.stopPropagation();
        return false;       
    });
</script>
</body></html>

return false; vs e.preventDefault(); vs e.stopPropagation(); discussion trouvé ici: stackoverflow.com/questions/1357118/...
Tous vos jQuery code doit être enveloppé dans un $(document).ready( function() { ...code here... } ); Qui, en combinaison avec la suppression de la disabled tag de votre balisage et le sélecteur doit obtenir des choses de travail.

InformationsquelleAutor Andrew Rumm | 2009-11-18

54

jQuery ne va pas résoudre ce un OOTB. Il peut aider, mais aucun de stopPropagation, stopImmediatePropagation, preventDefault, return false de travailler si vous il suffit de l'attacher à l'élément. Vous devez remplacer l'élément du gestionnaire de clic.

Cependant vous dites dans votre question "sans enlever onclick" actions. Si vous avez besoin de remplacer le comportement par défaut au moment du déclenchement de l'événement (par opposition à la plus propre approche de simplement nulling le onclick attribut pour les personnes handicapées ancrages):

Voici ce que je veux dire:
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>Disable clicks</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>
<body>
  <a href="#" onclick="alert('panic!')">Let's panic</a>
  <a href="#" onclick="alert('panic!')" disabled="disabled">I can't panic no more</a>

  <script>
  $('a[onclick]').each(function(){
    $(this).data('onclick', this.onclick);

    this.onclick = function(event) {
      if($(this).attr('disabled')) { //HERE
        return false;
      };

      $(this).data('onclick').call(this, event || window.event);
    };
  });
  </script>
</body>
</html>
```
Démo ici.

L'approche y est de remplacer la ligne cliquez sur gestionnaire (onclick) avec de préemption logique pour attraper le cas où l'ancre est "désactivé" et puis annuler l'événement (avec return false).

L'avantage est que pour permettre à une ancre de nouveau, il vous suffit de .removeAttr('disabled') sur elle.
- Agréable et très propre solution! Est le event || window.event nécessaire puisque jQuery déjà normalise les navigateurs et les event est l'objet nettoyé version par le temps de votre code appelle?
- oui, c'est nécessaire. Avis nous sommes juste dans une ligne de gestionnaire d'événements (onclick) que le navigateur appelle, pas un gestionnaire de jQuery normalise et l'appelle.
- Super! Je vous remercie pour résoudre et d'explication. Exactement ce dont j'ai besoin.
- J'ai utilisé eval(event.currentTarget.getAttribute('onclick')); au lieu de $(this).data('onclick').call(this, event || window.event);. Les deux solutions fonctionnent. Merci!
InformationsquelleAutor Crescent Fresh
7

disabled n'est pas une propriété des ancres. Utilisez quelque chose comme rel='disabled' à la place.
```
$('a[]').click( function() { return false; } );
```
Mise à jour:

Ah, bien sûr. - Il encore les feux de la alert parce que c'est en fait incluse dans le balisage! Je n'ai jamais le faire et ainsi ne pas le remarquer. Prendre cliquez sur gestionnaire de l'annotation et de le faire en jQuery, en premier lieu, et ainsi, vous pouvez tout simplement faire quelque chose comme:
```
$('a').click( function() {
  if( $(this).attr('rel') == 'disabled' ) { return; }
  //do stuff here when not disabled
  return false; //so your '#' href doesn't get used
} );
```
- +1 je n'ai même pas remarqué le mauvais sélecteur
- Oui, jQuery doit être en mesure de faire a[disabled="disabled"] travail, mais IMO c'est une mauvaise idée. Stick avec des balises valides 🙂
- de toute façon, j'ai essayé d'empêcher l'utilisation de certaines de classe nommé désactivé. Il ne fait toujours rien.
- Mise à jour de ma réponse.
InformationsquelleAutor rfunduk

Le problème est que jQuery ajoute des événements dans l'ordre. Pour arrêter d'autres événements, les événements dont vous avez besoin pour arrêter doit venir après votre arrêt de code. Puisque vous avez le code dans votre sur un clic, vous aurez besoin de changer l'ordre. C'est ce que je ferais:

<a href='#' onclick="alert('HA-ha!')" class="disabled">TEST</a>
<a href='#' onclick="alert('HA-ha!')">TEST</a>
<script type="text/javascript">
    $('a').each(function(){
        //Cache event
        var existing_event = this.onclick;

        //Remove the event from the link
        this.onclick = null;

        //Add a check in for the class disabled
        $(this).click(function(e){ 
            if($(this).hasClass('disabled')){
                e.stopImmediatePropagation();
                e.preventDefault();
            }                
        });

        //Reattach your original onclick, but now in the correct order
        //if it was set in the first place
        if(existing_event) $(this).click(existing_event);
    });
</script>

L'intérêt est juste de supprimer/ajouter les handicapés de la classe à l'aide de jQuery: $('a#whatever').addClass('disabled') ou supprimer $('a#whatever').removeClass('disabled') et aucune autre de nettoyage/de l'installation est nécessaire.

InformationsquelleAutor Doug Neiner

Tout des gestionnaires de clic ajouté par jQuery semblent feu après ceux ajoutés dans la marque vers le haut. Ma solution serait d'appliquer les gestionnaires de clic à l'aide de jQuery au lieu de la marque vers le haut, mais vous ne pouvez pas avoir suffisamment de contrôle sur le code pour faire cela. Si vous le faites, alors il vous suffit de ne pas appliquer le gestionnaire de clic pour ancrer les balises de classe désactivé (et, oui, je voudrais utiliser une classe plutôt qu'un attribut inapproprié). Si vous n'avez pas de contrôle sur la marque vers le haut, alors vous voudrez peut remplacer le gestionnaire de clic à l'aide de jQuery, de les stocker pour plus tard demande.

   $(function() {
      $('a.disabled').each( function() {
         var $this = $(this);
         var click = $this.attr('onclick');
         if (click) {
             $this.data('click',click);
             //add return false to prevent default action
             $this[0].onclick =  function() { return false; };
         }
      });

      $('#restoreClick').click( function() {
          $('a.disabled').each( function() {
              var $this = $(this);
              $this.removeClass('disabled');
              var click = $this.data('click');
              if (click) {
                  $this[0].onclick = click;
              }
          });
      });
   });

Testé avec:

<div>
    <a href="#" onclick="alert('panic!')">Let's panic</a>
    <a href="#" onclick="alert('panic!')" class="disabled">I can't panic no more</a>
</div>
<div>
    <input type="button" id="restoreClick" value="Restore" />
</div>

InformationsquelleAutor tvanfosson

0

Je l'ai trouvé assez simple solution pour éviter onclicks aujourd'hui, mais en gardant à l'action si vous en avez besoin.
```
<a href="javascript:alert('panic!')" >Let's panic</a>
<a href="javascript:alert('panic!')" disabled="disabled">I can't panic no more</a>

$('a').click(function(e){
    if($(this).attr('disabled')) e.preventDefault();
});
```
Je ne suis pas un grand fan de l'utilisation de "javascript:" mais c'est de loin la solution la plus simple au problème.

Espère que cela aide!
- I'm not a huge fan of using "javascript:", but this was by far the simplest solution to the problem. Vous préférez l'autre côté client, les langages de script n'ya?
- J'aime le JavaScript, mais je préfère ne pas utiliser de javascript en ligne avec le "javascript:" la syntaxe. "javascript:alert('la panique!')" <-- exemple. La première exigence d'une smart-ass remarque est qu'il doit être "smart" 😉
- il est en effet...
InformationsquelleAutor MrBojangles

Vous devez vous connecter pour publier un commentaire.