event.stopPropagation()不生效？点击元素时如何阻止window点击事件触发

导致event.stopPropagation()不生效的常见原因 #

• 触发点击的.dropdown-container是页面加载完成后动态插入的元素，你使用的$('.dropdown-container').click()直接绑定写法只能作用于绑定时页面已存在的元素，动态新增的元素不会触发该回调，自然stopPropagation也不会执行，事件会正常冒泡到window。
• 你对.dropdown-container的点击事件用了事件委托绑定到了document/body等高层级节点，委托绑定的回调触发时，事件已经冒泡到了绑定的父层级，此时再调用stopPropagation也阻止不了事件继续向上传递到window。
• 存在其他代码在你的回调执行前，手动触发了window的click事件。

修复步骤 #

1. 先验证回调是否触发：在.dropdown-container的点击回调第一行加打印，确认点击元素时回调正常执行：

$('.dropdown-container').click(function(event){
  console.log('dropdown点击回调触发') // 点击元素如果没打印就是绑定失效
  event.stopPropagation()
  // 原有逻辑
})

2. 如果是动态元素导致绑定失效，改为在元素插入到页面后，单独给新增的元素绑定点击事件，不要使用委托绑定到document层级。
3. 优化原有逻辑的选择器问题：你原来的写法会选中页面所有.dropdown-container下的select，存在多个下拉时逻辑错误，改为获取当前点击容器内的元素。

修复后完整代码 #

// 静态元素直接绑定，动态元素在生成后执行这段绑定逻辑
$('.dropdown-container').click(function(event){
  event.stopPropagation();
  // 只查找当前点击容器内的select
  const $currentSelect = $(this).find('> select');
  if($currentSelect.hasClass('actionDD') || $currentSelect.hasClass('countryDD')){
    $currentSelect.toggleClass('special');
  }
  $('.fa-chevron-down.importC, .fa-chevron-down.exportC').removeClass('special');
});

$(window).click(function(event){
  console.log('window event clicked');
  $('.dropdown-container, .fa-chevron-down.importC, .fa-chevron-down.exportC').removeClass('special');
});

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