javascript - Hur stoppar man händelsepropagering med inline onclick-attribut?

Tänk på följande:

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

Hur kan jag göra så att när användaren klickar på , utlöser det inte div:s klickhändelse?

Svar #1

Använd event.stopPropagation().

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

För IE: window.event.cancelBubble=true

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

Svar #2

Det finns två sätt att få händelseobjektet från insidan av en funktion:

  1. Det första argumentet, i en W3C-kompatibel webbläsare (Chrome, Firefox, Safari, IE9+)
  2. Window.event-objektet i Internet Explorer (≤8)

Om du behöver stödja äldre webbläsare som inte följer W3C-rekommendationerna, skulle du vanligtvis använda något liknande följande inne i en funktion:

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

vilket skulle kontrollera först den ena, och sedan den andra och lagra den som hittades i händelsevariabeln. Men i en inline-händelsehanterare finns det inget e-objekt att använda. I det fallet måste du utnyttja arguments-samlingen som alltid är tillgänglig och refererar till hela uppsättningen argument som skickas till en funktion:

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

Men generellt sett bör du undvika inline-händelsehanterare om du behöver göra något komplicerat som att stoppa spridning. Att skriva dina händelsehanterare separat och sedan koppla dem till element är en mycket bättre idé på medellång och lång sikt, både för läsbarhet och underhållbarhet.

Svar #3

Tänk på att window.event inte stöds i FireFox, och därför måste det vara något i stil med:

e.cancelBubble = true

Eller, du kan använda W3C-standarden för FireFox:

e.stopPropagation();

Om du vill bli fint kan du göra så här:

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

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

Svar #4

Använd denna funktion, den kommer att testa för existensen av den rätta metoden.

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

Svar #5

Jag hade samma problem - js-felruta i IE - detta fungerar bra i alla webbläsare såvitt jag kan se (event.cancelBubble=true gör jobbet i IE)

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

Svar #6

Det här fungerade för mig

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

Svar #7

För ASP.NET-webbsidor (inte MVC) kan du använda Sys.UI.DomEvent-objektet som en omslagare för det inbyggda eventet.

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

eller, skicka händelsen som en parameter till den inre funktionen:

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

och i someFunction:

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

Svar #8

Jag kan inte kommentera på grund av Karma, så jag skriver detta som hela svaret: Enligt svaret från Gareth (var e=arguments[0] || window.event; [...]) använde jag denna enkelrad inline på onclick för en snabb lösning:

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

Jag vet att det är sent men jag ville låta dig veta att detta fungerar i en rad. Klammrarna returnerar en händelse som har stopPropagation-funktionen bifogad i båda fallen, så jag försökte kapsla in dem i klammrar som i ett if och....det fungerar. :)

Relaterade artiklar