web-dev-qa-db-fra.com

Comment arrêter la propagation d'événement avec l'attribut inline onclick?

Considérer ce qui suit:

<div onclick="alert('you clicked the header')" class="header">
  <span onclick="alert('you clicked inside the header');">something inside the header</span>
</div>

Comment puis-je faire en sorte que lorsque l'utilisateur clique sur la plage, il ne déclenche pas l'événement de clic div?

javascripthtmleventsdom
288
Sam

Utilisez event.stopPropagation () .

<span onclick="event.stopPropagation(); alert('you clicked inside the header');">something inside the header</span>

Pour IE: window.event.cancelBubble = true

<span onclick="window.event.cancelBubble = true; alert('you clicked inside the header');">something inside the header</span>
237
James

Il existe deux manières d'obtenir l'objet événement de l'intérieur d'une fonction:

  1. Le premier argument, dans un navigateur compatible W3C (Chrome, Firefox, Safari, IE9 +)
  2. L'objet window.event dans Internet Explorer (<= 8)

Si vous devez prendre en charge des navigateurs hérités qui ne suivent pas les recommandations du W3C, vous utiliserez généralement une fonction semblable à celle-ci:

function(e) {
  var event = e || window.event;
  [...];
}

qui vérifie d'abord l'un, puis l'autre et stocke celui qui a été trouvé à l'intérieur de la variable d'événement. Cependant, dans un gestionnaire d'événements en ligne, il n'y a pas d'objet e à utiliser. Dans ce cas, vous devez tirer parti de la collection arguments qui est toujours disponible et fait référence à l'ensemble complet des arguments passés à une fonction:

onclick="var event = arguments[0] || window.event; [...]"

Cependant, en règle générale, évitez les gestionnaires d’événements en ligne si vous avez besoin de quelque chose de compliqué comme l’arrêt de la propagation. Écrire vos gestionnaires d'événements séparément et les attacher aux éléments est une bien meilleure idée à moyen et long terme, tant pour la lisibilité que pour la facilité de maintenance.

206
Gareth

Gardez à l'esprit que window.event n'est pas pris en charge dans FireFox et qu'il doit donc s'agir de quelque chose comme:

e.cancelBubble = true

Ou, vous pouvez utiliser la norme W3C pour FireFox:

e.stopPropagation();

Si vous voulez avoir envie, vous pouvez faire ceci:

function myEventHandler(e)
{
    if (!e)
      e = window.event;

    //IE9 & Other Browsers
    if (e.stopPropagation) {
      e.stopPropagation();
    }
    //IE8 and Lower
    else {
      e.cancelBubble = true;
    }
}
80
Robert C. Barth

Utilisez cette fonction, elle vérifiera l’existence de la bonne méthode.

function disabledEventPropagation(event)
{
   if (event.stopPropagation){
       event.stopPropagation();
   }
   else if(window.event){
      window.event.cancelBubble=true;
   }
}
45
SoftwareARM

J'ai eu le même problème - boîte d'erreur js dans IE - cela fonctionne très bien dans tous les navigateurs aussi loin que je peux voir (event.cancelBubble = true fait le travail dans IE)

onClick="if(event.stopPropagation){event.stopPropagation();}event.cancelBubble=true;"
18
MSC

Cela a fonctionné pour moi

<script>
function cancelBubble(e) {
 var evt = e ? e:window.event;
 if (evt.stopPropagation)    evt.stopPropagation();
 if (evt.cancelBubble!=null) evt.cancelBubble = true;
}
</script>

<div onclick="alert('Click!')">
  <div onclick="cancelBubble(event)">Something inside the other div</div>
</div>
10
Matías Contreras Selman

Pour les pages Web ASP.NET (pas MVC), vous pouvez utiliser l'objet Sys.UI.DomEvent comme enveloppe de l'événement natif.

<div onclick="event.stopPropagation();" ...

ou, passez l'événement en tant que paramètre de la fonction interne:

<div onclick="someFunction(event);" ...

et dans une certaine fonction:

function someFunction(event){
    event.stopPropagation(); // here Sys.UI.DomEvent.stopPropagation() method is used
    // other onclick logic
}
7
Evgeny Gorb

Selon cette page , dans IE vous avez besoin de:

event.cancelBubble = true

5
ajh1138

Pourquoi ne pas simplement vérifier quel élément a été cliqué? Si vous cliquez sur quelque chose, window.event.target est affecté à l'élément sur lequel vous avez cliqué. et l'élément sur lequel vous avez cliqué peut également être passé en argument.

Si la cible et l'élément ne sont pas égaux, c'est un événement qui s'est propagé vers le haut.

function myfunc(el){
  if (window.event.target === el){
      // perform action
  }
}
<div onclick="myfunc(this)" />
1
cs01

Cela fonctionne aussi - Dans le lien HTML, utilisez onclick avec return comme ceci:

<a href="mypage.html" onclick="return confirmClick();">Delete</a>

Et ensuite, la fonction comfirmClick () devrait ressembler à ceci:

function confirmClick() {
    if(confirm("Do you really want to delete this task?")) {
        return true;
    } else {
        return false;
    }
};
1
Rajendra
<div onclick="alert('you clicked the header')" class="header">
  <span onclick="alert('you clicked inside the header'); event.stopPropagation()">
    something inside the header
  </span>
</div>
0
commonpike