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/

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

我该如何解决？

由于

Answer 1

只需添加event.stopPropagation()

即可

＆＃13;

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

＆＃13;

.A {
  background-color:green;
  height:100%;
}

.B {
  width:100px;
  background-color:cyan;
}

＆＃13;

<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>

＆＃13;

Answer 2

我想你也可以尝试一下。

$(".B a").click(function() {
window.location = this.href;
    return false;
});

父母停止传播时如何点击A标签？

2 个答案: