如何实现可点击父元素内指定子元素不触发父级点击事件

不用改现有HTML结构，给内部的Add to Cart按钮绑个点击事件，在回调里同时拦掉事件冒泡和默认行为就可以实现需求：

• 调用event.stopPropagation()阻止点击事件向上冒泡，父级a标签以及上层元素绑定的所有点击回调都不会触发
• 调用event.preventDefault()拦截a标签的默认跳转行为

提个注意点：按HTML语义规范，button这类可交互元素不建议嵌套在a标签内部，如果后续遇到奇怪的事件兼容问题，可以调整为a和button同级、用CSS定位叠加的布局方案，当前需求直接用下面的代码就能正常生效。

实现代码 #

原有结构不动，加一段JS绑定事件即可：

<a href="test.com">
 <img />
 <!-- 注意title是HTML头部标签，页面内的商品标题建议用h3/p这类标签 -->
 <h3>商品标题</h3>
 <button class="add-cart-btn">
  Add to Cart
 </button>
</a>

原生JS实现：

const cartBtn = document.querySelector('.add-cart-btn');
cartBtn.addEventListener('click', function(e) {
  // 阻止冒泡，不触发父元素绑定的点击事件
  e.stopPropagation();
  // 阻止a标签默认跳转
  e.preventDefault();

  // 这里写你自己的加购逻辑，比如请求接口、弹成功提示
  console.log('加购成功');
})

如果用jQuery开发，回调里直接return false就等价于同时阻止冒泡和默认行为，写法更简单：

$('.add-cart-btn').on('click', function() {
  // 加购逻辑
  console.log('加购成功');
  return false;
})

最终效果：点击图片、标题等按钮外的区域，会正常触发a标签跳转；点击Add to Cart按钮只会执行加购逻辑，既不会跳转，也不会触发父元素的点击回调，完全符合要求。

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