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

Question

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

这是代码

HTML

<div class="A" align="center">
    <div class="B">
        <a href="mailto:example@hotmail.com">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/

如果你点击绿色部分，我会关闭整个弹出窗口，我现在只放一个警报。但是，如果您单击内部容器部分，则不会发生任何事情，因此我在单击事件上设置了 return false。但是，对于内部容器中的 A 标记，我希望它们仍然有效，但返回 false 部分会停止它。

我该如何解决？

谢谢

Answer 1

只需添加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:example@hotmail.com">LINK</a>
    </div>
</div>