Bagaimana cara menghentikan propagasi acara dengan atribut onclick inline?

Pertimbangkan yang berikut ini:

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

Bagaimana saya bisa membuatnya sehingga ketika pengguna mengklik rentang, itu tidak memunculkan divacara klik?

Gunakan event.stopPropagation () .

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

Untuk IE: window.event.cancelBubble = true

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

Ada dua cara untuk mendapatkan objek acara dari dalam suatu fungsi:

1. Argumen pertama, di browser yang kompatibel dengan W3C (Chrome, Firefox, Safari, IE9 +)
2. Objek window.event di Internet Explorer (<= 8)

Jika Anda perlu mendukung browser lawas yang tidak mengikuti rekomendasi W3C, umumnya di dalam fungsi Anda akan menggunakan sesuatu seperti berikut:

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

yang akan memeriksa yang pertama, dan yang lain dan menyimpan mana yang ditemukan di dalam variabel acara. Namun dalam event handler inline tidak ada eobjek untuk digunakan. Dalam hal ini Anda harus mengambil keuntungan dari argumentskoleksi yang selalu tersedia dan merujuk pada set lengkap argumen yang dilewatkan ke fungsi:

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

Namun, secara umum Anda harus menghindari penangan event inline jika Anda perlu melakukan sesuatu yang rumit seperti menghentikan propagasi. Menulis event handler Anda secara terpisah dan melampirkannya ke elemen adalah ide yang jauh lebih baik dalam jangka menengah dan panjang, baik untuk keterbacaan dan pemeliharaan.

Ingatlah bahwa window.event tidak didukung di FireFox, dan karena itu pasti ada sesuatu seperti:

e.cancelBubble = true

Atau, Anda dapat menggunakan standar W3C untuk FireFox:

e.stopPropagation();

Jika Anda ingin menjadi mewah, Anda dapat melakukan ini:

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

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

Gunakan fungsi ini, itu akan menguji keberadaan metode yang benar.

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

Saya memiliki masalah yang sama - kotak kesalahan js di IE - ini berfungsi dengan baik di semua browser sejauh yang saya bisa lihat (event.cancelBubble = true melakukan pekerjaan di IE)

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

Ini berhasil untuk saya

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

Untuk halaman web ASP.NET (bukan MVC), Anda bisa menggunakan Sys.UI.DomEventobjek sebagai pembungkus acara asli.

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

atau, meneruskan acara sebagai parameter ke fungsi dalam:

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

dan dalam beberapa fungsi:

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

Menurut halaman ini , di IE Anda perlu:

event.cancelBubble = true

Saya tidak dapat berkomentar karena Karma jadi saya menulis ini sebagai jawaban keseluruhan: Menurut jawaban Gareth (var e = argumen [0] || window.event; [...]) Saya menggunakan ineliner inline ini pada onclick untuk hack cepat:

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

Saya tahu ini sudah terlambat, tetapi saya ingin memberi tahu Anda bahwa ini bekerja dalam satu baris. Kawat gigi mengembalikan sebuah acara yang memiliki fungsi stopPropagation terpasang dalam kedua kasus, jadi saya mencoba untuk merangkum mereka dalam kawat gigi seperti di jika dan .... berfungsi. :)

Ini juga berfungsi - Di tautan gunakan HTML onclick dengan pengembalian seperti ini:

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

Dan kemudian fungsi comfirmClick () harus seperti:

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

Mengapa tidak memeriksa elemen mana saja yang diklik? Jika Anda mengklik sesuatu, window.event.targetditugaskan ke elemen yang diklik, dan elemen yang diklik juga dapat diteruskan sebagai argumen.

Jika target dan elemen tidak sama, itu adalah peristiwa yang disebarkan.

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>

Solusi terbaik akan ditangani dengan acara melalui fungsi javascript, tetapi untuk menggunakan solusi sederhana dan cepat menggunakan elemen html secara langsung, dan sekali bahwa "event" dan "window.event" sudah usang dan tidak didukung secara universal ( https://developer.mozilla.org/en-US/docs/Web/API/Window/event ), saya sarankan "hard code" berikut:

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