点击子li触发父li点击事件，event.stopPropagation()不生效如何解决？

问题根因 #

• 你首先给所有li元素都绑定了通用点击事件，内层嵌套的子li本身也绑定了该事件，点击子li时会先触发子li自己的这个回调
• 同一个元素上的同类型事件按绑定顺序执行：你先给父级li绑定了通用点击事件，之后才绑定带e.stopPropagation()的事件，所以事件冒泡到父li时，会先执行父li的通用点击回调，再执行阻止冒泡逻辑，此时父级点击事件已经触发，阻止冒泡已经没有作用
• 你写的e.stopPropagation()只是阻止父li的事件继续向上冒泡到更外层元素，无法阻止已经从子li冒到父li的事件触发父li上绑定的回调。

可用解决方案 #

方案1：给内层子li增加阻止冒泡逻辑 #

不让子li的点击事件冒泡到父级li即可：

$("li").on("click",function() {
  console.log(this.firstChild.textContent)
})
$('#testUl li').on('click', function(e) {
  e.stopPropagation();
})

方案2：明确指定绑定事件的li层级 #

不要给所有li都绑定通用事件，按需指定对应层级的元素绑定逻辑，比如只需要父级li触发逻辑就只绑父级：

// 只给testUl的直接子li绑定点击逻辑，子级li不会触发该回调
$('#testUl > li').on("click",function() {
  console.log(this.firstChild.textContent)
})

方案3：在通用回调中判断触发源 #

通过判断点击的目标元素和当前绑定事件的元素是否一致，避免冒泡触发的回调执行：

$("li").on("click",function(e) {
  // 只有点击的是当前li本身时才执行逻辑
  if(e.target === this) {
    console.log(this.firstChild.textContent)
  }
})

内容的提问来源于stack exchange，提问作者Shakir