Comment arrêter la propagation des événements avec l'attribut onclick en ligne?

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' divévénement de clic?

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>

Il existe deux façons 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 les navigateurs hérités qui ne suivent pas les recommandations du W3C, généralement à l'intérieur d'une fonction, vous utiliserez quelque chose comme ceci:

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

qui vérifierait d'abord l'un, puis l'autre et stocker celui qui a été trouvé dans la variable d'événement. Cependant, dans un gestionnaire d'événements en ligne, il n'y a pas d' eobjet à utiliser. Dans ce cas, vous devez profiter de la argumentscollection 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, vous devez éviter 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 à des éléments est une bien meilleure idée à moyen et long terme, à la fois pour la lisibilité et la maintenabilité.

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 devenir chic, vous pouvez le faire:

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

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

Utilisez cette fonction, elle testera l'existence de la bonne méthode.

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

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

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

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>

Pour les pages Web ASP.NET (pas MVC), vous pouvez utiliser l' Sys.UI.DomEventobjet comme wrapper d'événement natif.

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

ou, passez l'événement comme paramètre à la fonction interne:

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

et dans certains Fonction:

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

Selon cette page , dans IE, vous avez besoin de:

event.cancelBubble = true

Je ne peux pas commenter à cause de Karma, donc j'écris ceci comme une réponse entière: selon la réponse de Gareth (var e = arguments [0] || window.event; [...]), j'ai utilisé cette ligne en ligne sur le onclick pour un piratage rapide:

<div onclick="(arguments[0] || window.event).stopPropagation();">..</div>

Je sais qu'il est tard mais je voulais vous faire savoir que cela fonctionne sur une seule ligne. Les accolades renvoient un événement auquel la fonction stopPropagation est attachée dans les deux cas, j'ai donc essayé de les encapsuler entre accolades comme dans un if et .... cela fonctionne. :)

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

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

Et puis la fonction comfirmClick () devrait être comme:

function confirmClick() {
    if(confirm("Do you really want to delete this task?")) {
        return true;
    } else {
        return false;
    }
};

Pourquoi ne pas simplement vérifier quel élément a été cliqué? Si vous cliquez sur quelque chose, window.event.targetest affecté à l'élément sur lequel vous avez cliqué, et l'élément 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é.

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

<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>

La meilleure solution serait de gérer l'événement via une fonction javascript, mais afin d'utiliser une solution simple et rapide en utilisant directement l'élément html, et une fois que "event" et "window.event" sont obsolètes et ne sont pas universellement pris en charge ( https://developer.mozilla.org/en-US/docs/Web/API/Window/event ), je suggère le "code dur" suivant:

<div onclick="alert('blablabla'); (arguments[0] ? arguments[0].stopPropagation() : false);">...</div>