点击锚点标签时阻止父div的onclick事件触发的技术咨询

这种div的onclick直接内联调用window.open(url)的场景确实有点特殊，但咱们可以通过阻止锚点元素的事件冒泡来解决问题——既保留a标签自身的跳转功能，又不让父级div的window.open被触发。

直接修改a标签的代码就行，给它添加onclick属性来拦截事件冒泡：

<div onclick="window.open('你的div跳转链接')">
  <p>这里是div内的内容...</p>
  <a href="你的锚点链接" onclick="event.stopPropagation();">点击我不会触发父级div的跳转</a>
</div>

原理拆解： #

• 当点击a标签时，浏览器会先执行a标签自身的onclick事件，这里调用的event.stopPropagation()会阻止事件向上传递到父级div。
• 之后a标签会正常执行默认的跳转行为，而父级div的window.open就不会被触发了。

老旧浏览器兼容方案： #

如果需要兼容IE8及以下的老旧浏览器，可以把a标签的onclick代码改成这样，确保能正确获取事件对象并阻止冒泡：

<a href="你的锚点链接" onclick="(window.event || event).cancelBubble = true;">点击我不会触发父级div的跳转</a>

这里的cancelBubble是IE专属的阻止冒泡属性，结合标准的event对象就能覆盖更多浏览器场景。

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