JavaScript中前方存在带onclick元素时当前元素点击事件失效求助

嘿，我来帮你搞定这个点击事件触发不了的问题！你说的情况大概率是两种常见原因导致的，结合你给的弹窗代码，我给你拆解清楚：

第一种情况：前置元素直接把你的目标元素挡住了 #

这是最常见的原因——可能那个带onclick的前置元素，通过CSS（比如position:absolute/fixed、更高的z-index）偷偷盖在你要点击的元素上面了，哪怕它看起来是透明的或者很小，都会把点击事件抢走。

解决办法： #

• 给目标元素提层级：给你需要触发点击的元素加个更高的z-index，确保它能“浮”在前面：

  .your-target-element {
    position: relative;
    z-index: 999; /* 数字比前置元素的z-index大就行 */
  }
  

• 检查前置元素的尺寸：如果前置元素的宽高设置得太大，超出了它自己的可视范围，赶紧调整尺寸或者加overflow:hidden，别让它乱占地儿；
• 让点击穿透过去：如果那个前置元素根本不需要拦截点击，给它加个CSS属性就行：

  .front-element {
    pointer-events: none;
  }
  

  这样点击就会直接穿透到下面的元素，完全不影响前置元素的样式。

第二种情况：前置元素的点击事件阻止了冒泡 #

如果前置元素的onclick代码里写了event.stopPropagation()或者return false，会把事件冒泡的路径打断——要是你的目标元素是前置元素的父元素，那点击事件就传不到目标元素那儿了。

解决办法： #

• 改前置元素的代码：如果没必要阻止冒泡，直接把event.stopPropagation()或者return false删掉就行；
• 用事件捕获绑定目标元素：如果必须保留前置元素的阻止冒泡逻辑，那给目标元素绑定事件的时候开启事件捕获：

  document.querySelector('.your-target-element').addEventListener('click', function() {
    // 这里写你的点击逻辑
  }, true); // 第三个参数设为true，就是开启事件捕获啦
  

顺便给你的弹窗代码提个优化建议 #

看你给的弹出子窗口代码，逻辑有点冗余，而且可能存在渲染问题，我帮你简化一下：

var child = window.open('', '', 'width=700, height=500');
if (child) {
  child.moveTo(150, 150);
  child.document.write("<h2>Child Window</h2><div id='defaultOutput'></div><div id='firstDiv'></div><div id='secondDiv'></div>");
  // 一定要加这句，不然子窗口可能没法完全渲染出来
  child.document.close();
} else {
  alert('Please unlock your popup blocker.');
}

另外要注意：浏览器会拦截非用户主动触发的弹窗，所以这段代码必须直接放在用户点击的事件回调里，不能嵌套在定时器、异步请求这类逻辑里面哦。

要是你的情况和上面两种都不一样，不妨把两个元素的HTML结构、CSS样式贴出来，这样我能更精准地帮你定位问题～

内容的提问来源于stack exchange，提问作者조항민