javascript - 如何使 div 可点击但使 anchor 链接优先/取消 div 点击？

Question

Web 开发不是我的强项，如果这很愚蠢，我深表歉意，但我想要一个可在移动设备上点击的 div，这样我就可以拦截点击并执行操作。

我附上一个 touchdown JavaScript 中 div 的事件监听器，当我点击时，我为 div 着色以指示它已被选中。

但是，如果有一个 anchor 标记 <a href="..."></a>在包含一些文本的 div 中(在这种情况下完全有效)，我不希望在您单击链接时突出​​显示该 div。

我不确定网络开发中的术语，但是有没有办法让 anchor 标记拦截触摸，这样如果选择了 anchor 标记，它们就不会被发送到 div？

Answer 1

您可以在事件处理程序中使用条件语句来测试事件目标是否为 anchor 。我在示例中使用了 click 事件，但它也应该与 touchdown 一起使用。

var tapDiv = document.querySelector('#tap');

tapDiv.addEventListener('click', function(e) {
  //conditional ensures the clicked element isn't an <a>
  if (e.target.tagName.toLowerCase() !== 'a') {
    e.currentTarget.style.backgroundColor = 'orange';
  }
});

#tap {
  padding: 8px;
  background-color: black;
}

#tap a {
  display: inline-block;
  padding: 8px;
  background-color: white;
}

<div id="tap"><a href="#">This is the anchor</a></div>