父元素阻止事件冒泡时，如何让A标签的点击事件正常触发？

我懂你现在的困扰——在带背景遮罩的弹窗结构里，点击<a>标签的mailto链接完全没反应，对吧？咱们从代码里揪出问题根源：

问题出在哪？ #

你给.B绑定的点击事件里用了return false;，在jQuery的事件处理逻辑里，这行代码等价于同时执行了两个关键操作：

1. event.preventDefault()：直接阻止当前元素的默认行为（比如a标签的跳转动作）
2. event.stopPropagation()：阻止事件向上冒泡到父级元素

而你的<a>标签嵌套在.B内部，点击a的时候，事件会先触发a的默认跳转，再向上冒泡到.B。但.B的return false直接把这两个操作都拦截了——不光阻止了事件冒泡到.A弹出alert，连a标签本身的mailto跳转也被掐断了！

怎么修复？ #

只需要把.B的点击事件逻辑改一下，只阻止事件冒泡，不影响内部元素的默认行为就行，把return false;换成event.stopPropagation();：

$(".A").click(function() {
  alert(1);
});

$(".B").click(function(event) {
  // 只阻止事件向上冒泡到.A，不干扰内部a标签的默认跳转
  event.stopPropagation();
});

修改后效果：

• 点击.A的空白遮罩区域（非.B部分），依然会弹出alert
• 点击.B里的<a>标签，mailto链接会正常触发，同时事件不会冒泡到.A弹alert
• 点击.B的空白区域（非a标签部分），也不会触发.A的alert，完全符合遮罩弹窗的交互逻辑

额外提醒：别乱用return false #

以后写jQuery事件处理时要区分清楚：

• 仅阻止事件冒泡：用event.stopPropagation()
• 仅阻止元素默认行为（比如a跳转、表单提交）：用event.preventDefault()
• 同时需要两个效果时，再用return false;

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