如何制作可点击的横幅

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的click事件正在传播DOM并触发div上的click处理程序。

您可以通过两种方法解决此问题。 首先，检查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();
});