HTML：
<p id="container">
<p id="inner">
</p>
</p>
JS：
document.getElementById('container').addEventListener('click',function () {
document.getElementById('inner').style.display = "none";
});
When I click on the child element, it will disappear. How to avoid this situation? I don't want to bind click events to child elements as well.
3
0
0
document.getElementById('container').addEventListener('click',function (e) {
document.getElementById('inner').style.display = "none";
e.stopPropagation();
}, true);
Pass the third parameter true to addEventListener. Use event capture.
https://developer.mozilla.org...
e.stopPropagation() Stop event propagation.
https://developer.mozilla.org...
https://jsfiddle.net/g5u7qrrd/6/
document.getElementById('container')
.addEventListener('click',function (e) {
if (e.target.id !== 'inner')
document.getElementById('inner').style.display = "none";
});Add pointer-events: none;to the sub-element style and ignore mouse events directly. IE may need to be compatible.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
