javascript - 如何防止孙子元素的超链接

Question

我怎样才能使 .no-click div 无需转到 http://example.com 即可点击？ 页面？谁能帮帮我？

这是一个例子 https://lajumate.ro/这是带有广告的网页，如果您将鼠标悬停在广告上，则会显示共享按钮和保存按钮，并且可点击(按钮位于 href 内)

.test {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
}

.no-click {
  position: absolute;
  top: 25%;
  right: 25%;
  width: 50px;
  height: 50px;
  background-color: blue;
}

<a href="http://example.com">
  <div class="test">
    <div class="no-click">

    </div>
  </div>
</a>

Answer 1

正确的方法是使用stopPropagation ，这是其历史别名的更新方法 cancelBubble , 并取消事件冒泡。

在某些情况下 preventDefault可以工作，但请注意，它不会取消冒泡，但可以产生类似的效果。

已更新:除非它还与 preventDefault 结合使用，否则它似乎不起作用。稍后会看看这是为什么。

堆栈片段

var no_click = document.querySelector('.no-click');
no_click.addEventListener('click', function(e) {
  e.stopPropagation();
  e.preventDefault();    //temp. update, though this should NOT be needed
  console.log('hey');
})

.test {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
}

.no-click {
  position: absolute;
  top: 25%;
  right: 25%;
  width: 50px;
  height: 50px;
  background-color: blue;
}

<a href="https://example.com">
  <div class="test">
    <div class="no-click">

    </div>
  </div>
</a>