javascript - parent 停止传播时如何让A标签点击？

我正在尝试做一个弹出效果，其中有一个背景阴影元素。问题是，当我单击A标记时，href不会触发。

这是代码

的HTML

<div class="A" align="center">
    <div class="B">
        <a href="mailto:[email protected]">LINK</a>
    </div>
</div>

JS

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

的CSS

.A {
  background-color:green;
  height:100%;
}

.B {
  width:100px;
  background-color:cyan;
}

https://jsfiddle.net/d1qb26td/3/

如果单击绿色部分，我将关闭整个弹出窗口，我现在只发出一个警报。但是，如果单击内部容器部分，则什么也不会发生，因此我在click事件上放置了return false。但是对于内部容器中的A标记，我希望它们仍然可以工作，但是返回false部分正在停止它。

我该如何解决？

谢谢

最佳答案

只需添加event.stopPropagation()

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

.A {
  background-color:green;
  height:100%;
}

.B {
  width:100px;
  background-color:cyan;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="A" align="center">
    <div class="B">
        <a href="mailto:[email protected]">LINK</a>
    </div>
</div>