javascript - 如何制作可点击的横幅

Question

我有一个div，里面有一个链接。当我点击一个 div 时，它应该打开链接(例如:google.com)但是当我点击按钮时它应该打开另一个链接。

<div class="sc-banner">
    <a href="#" target="_blank">Button</a>
</div>

$(".sc-banner").click(function (event) {
    event.stopPropagation();
    window.open ('http://google.com', "_blank");
});

Answer 1

问题是因为来自 a 的点击事件正在向上传播 DOM 并触发 div 上的点击处理程序。

您可以通过多种方式解决此问题。首先，检查 div 处理程序中的事件目标是什么:

$(".sc-banner").click(function(e) {
  e.stopPropagation();
  if (e.target.tagName !== 'A')
    window.open('http://google.com', "_blank");
});

或者，您可以向调用 stopPropagation() 的 a 添加另一个事件处理程序:

$(".sc-banner").click(function(e) {
  e.stopPropagation();
  window.open('http://google.com', "_blank");
});

$(".sc-banner a").click(function(e) {
  e.stopPropagation();
});