javascript - Jika elemen induk terikat untuk mengklik, bagaimanakah elemen anak dapat mengelak daripada mencetuskan klik elemen induk tanpa klik yang mengikat?

Question

HTML:

<p id="container">
  <p id="inner">

  </p>
</p>

JS:

document.getElementById('container').addEventListener('click',function () {
  document.getElementById('inner').style.display = "none";
});

Apabila saya klik pada elemen kanak-kanak, ia akan hilang. Bagaimana untuk mengelakkan situasi ini? Saya tidak mahu mengikat acara klik pada elemen kanak-kanak juga.

Answer 1

document.getElementById('container').addEventListener('click',function (e) {
  document.getElementById('inner').style.display = "none";
  e.stopPropagation();
}, true);

1. ialah addEventListener 传递第三个参数 true. Gunakan tangkapan peristiwa.

   • https://developer.mozilla.org...

2. e.stopPropagation() Hentikan penyebaran insiden.

   • https://developer.mozilla.org...

Answer 2

https://jsfiddle.net/g5u7qrrd/6/

document.getElementById('container')
    .addEventListener('click',function (e) {
        if (e.target.id !== 'inner')
            document.getElementById('inner').style.display = "none";
    });

Answer 3

Tambahkan pointer-events: none; pada gaya elemen kanak-kanak dan abaikan acara tetikus secara langsung. IE mungkin perlu serasi.