Satır içi onclick özniteliğiyle olay yayılımı nasıl durdurulur?

Aşağıdakileri göz önünde bulundur:

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

Kullanıcı açıklığı tıkladığında, div'tıklama olayını tetiklemeyecek şekilde nasıl yapabilirim ?

Event.stopPropagation () öğesini kullanın .

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

IE için: window.event.cancelBubble = true

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

Olay nesnesini bir işlevin içinden almanın iki yolu vardır:

1. W3C uyumlu bir tarayıcıda ilk argüman (Chrome, Firefox, Safari, IE9 +)
2. Internet Explorer'da window.event nesnesi (<= 8)

W3C önerilerine uymayan eski tarayıcıları desteklemeniz gerekiyorsa, genellikle bir işlev içinde aşağıdakine benzer bir şey kullanırsınız:

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

hangisi önce diğerini, diğerini ve olay değişkeni içinde hangisini depoladığını kontrol eder. Ancak bir satır içi olay işleyicisindee kullanılacak nesne yoktur. Bu durumda arguments, her zaman kullanılabilir olan ve bir işleve iletilen tüm bağımsız değişkenler kümesine gönderme yapan koleksiyondan yararlanmanız gerekir :

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

Ancak, genel olarak konuşmak gerekirse, yayılımı durdurmak gibi karmaşık bir şeye ihtiyacınız varsa, satır içi olay işleyicilerinden kaçınmalısınız. Etkinlik işleyicilerinizi ayrı ayrı yazmak ve öğelere bağlamak, hem okunabilirlik hem de sürdürülebilirlik için orta ve uzun vadede çok daha iyi bir fikirdir.

Window.event uygulamasının FireFox'ta desteklenmediğini ve bu nedenle aşağıdaki satırlarda bir şey olması gerektiğini unutmayın:

e.cancelBubble = true

Veya FireFox için W3C standardını kullanabilirsiniz:

e.stopPropagation();

Süslü olmak istiyorsanız, bunu yapabilirsiniz:

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

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

Bu işlevi kullanın, doğru yöntemin varlığını test edecektir.

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

Ben aynı sorunu vardı - IE hata kutusu - bu görebildiğim kadarıyla tüm tarayıcılarda iyi çalışıyor (event.cancelBubble = true IE iş yapar)

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

Bu benim için çalıştı

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

ASP.NET web sayfaları için (MVC değil), Sys.UI.DomEventnesneyi yerel olayın sarmalayıcısı olarak kullanabilirsiniz .

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

veya olayı iç fonksiyona parametre olarak iletir:

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

ve someFunction'da:

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

Bu sayfaya göre , IE'de ihtiyacınız olan:

event.cancelBubble = true

Karma nedeniyle yorum yapamam, bu yüzden bütün cevap olarak yazıyorum: Gareth'in cevabına göre (var e = arguments [0] || window.event; [...]) Bu oneliner'ı onclick üzerinde bir satır için kullandım hızlı kesmek:

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

Geç olduğunu biliyorum ama bunun bir satırda çalıştığını size bildirmek istedim. Parantez, her iki durumda da stopPropagation işlevine sahip bir olay döndürür, bu yüzden onları bir if gibi parantez içine almaya çalıştım ve .... çalışır. :)

Bu da işe yarıyor - Bağlantı HTML'de onclick'i şu şekilde döndürerek kullanın:

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

Ve sonra comfirmClick () işlevi şöyle olmalıdır:

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

Neden sadece hangi öğenin tıklandığını kontrol etmiyorsunuz? Bir şeyi tıklatırsanız window.event.target, tıklanan öğeye atanır ve tıklanan öğe bağımsız değişken olarak da geçirilebilir.

Hedef ve öğe eşit değilse, bu yayılan bir olaydı.

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>

En iyi çözüm, bir javascript işlevi aracılığıyla olayla başa çıkmaktır, ancak doğrudan html öğesini kullanarak basit ve hızlı bir çözüm kullanmak için ve "olay" ve "window.event" kullanımdan kaldırılmış ve evrensel olarak desteklenmez ( https://developer.mozilla.org/en-US/docs/Web/API/Window/event ), aşağıdaki "sabit kodu" öneririm:

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