事件委托(子元素嵌套问题和解决方法)

当我们给父元素利用委托来给子元素添加监听事件时,会遇到这样一种情况,就是子元素里面也嵌套了很多子元素当我们点击时返回不是我们想要的二级子元素,而是子元素里面嵌套的子元素。

解决方法

方法一、

给每一个子元素添加css: pointer-events : none (当设置为none时,元素则不接收hover、click事件，由他的父元素进行接收)

span {
   
	pointer-events: none;
}
p {
   
	pointer-events: none;
}

<ul>
    <li>
	    <span>你好</span>
	    <p>你在说什么</p>
    </li>
    
	<li> 
	     <span>你好</span>
	     <p>你在说什么</p>
     </li> 
     
</ul>

-----------------------------------

如果这种结构  直接给div加就可以
div {
   
	pointer-events: none;
}

<li>
   <div>
      <span>你好</span>
      <p>你在说什么</p>
   </div>
 </li>

方法二、

给点击元素的子元素都添加一个自定义属性,确保点击每个子元素都能返回相同的值
局限性:
当你只是需要给该元素添加类或者改变样式时就会很麻烦

<ul>
    <li data-id = '1'>