javascript - Si l'élément parent est obligé de cliquer, comment l'élément enfant peut-il éviter de déclencher le clic de l'élément parent sans lier le clic?

Question

HTML :

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

  </p>
</p>

JS :

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

Lorsque je clique sur l'élément enfant, il disparaît. Comment éviter cette situation ? Je ne souhaite pas non plus lier les événements de clic aux éléments enfants.

Answer 1

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

1. est addEventListener 传递第三个参数 true. Utilisez la capture d'événements.

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

2. e.stopPropagation() Arrêtez la propagation des incidents.

   • 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

Ajoutez un pointer-events: none; au style de l'élément enfant et ignorez directement les événements de la souris. IE devra peut-être être compatible.