problem description
bind the click event to the li. As a result, clicking on the li tag in li will not bubble on the parent element li. Only clicking on the rest of the li will trigger the click event
related codes
document.querySelector(".vertical").addEventListener("click", function(event) {
console.log(event.target)
var e = event.target;
if (e.nodeName.toLowerCase() == "li"){
var iconfont = e.querySelector(".iconfont");
if (iconfont) {
if (iconfont.innerHTML == "") {
iconfont.innerHTML = ""
iconfont.nextElementSibling.style.display = "block";
}else {
iconfont.innerHTML = ""
iconfont.nextElementSibling.style.display = "none";
}
}
}
}, false) //html
<ul class="vertical">
<li>
<a href="-sharp"></a>
<span class="iconfont"></span>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li>
<a href="-sharp"></a>
<span class="iconfont"></span>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li><a href="-sharp"></a></li>
<li><a href="-sharp"></a></li>
</ul>actual situation
at first, click on li span without response, and then click near the edge of the box, which is fine. I don"t know why