我如何使div tap可访问，但使锚链接优先/取消div tap

Question

Web开发不是我的强项，所以如果这是愚蠢的道歉，但我想有一个div，可以在移动设备上点击，所以我可以拦截点击和做事情。

我将touchdown事件监听器附加到JavaScript中的div，当我点击时，我为div上色以表明它已被选中。

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

我不确定在web开发的术语，但有一种方法，使锚标签拦截触摸，所以他们不被发送到div，如果锚标签被选中?

Answer 1

您可以在事件处理程序中使用条件来测试事件目标是否为锚。我在我的例子中使用了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>