单击问题内带有“i”和“span”的链接答案

【问题标题】：Click on link with "i" and "span" inside issue单击问题内带有“i”和“span”的链接
【发布时间】：2018-11-07 09:33:41
【问题描述】：

我们的团队使用谷歌标签管理器（或类似的东西）来跟踪用户将点击的电话号码或按钮。此工具要求元素具有id。

当我们点击一个没有 或 的简单链接时，一切正常。我们得到id，链接有效，出现带有“呼叫”或“取消”的弹出窗口。

但是，下面的markdown并不是那么简单：

<a class="phone-number" id="phone2" href="tel:+380671112233">
  <i class="fa fa-phone" aria-hidden="true"></i>
  <span>+38 067 111 22 33</span>
</a>

链接有效，弹出窗口出现，但id 未被跟踪

我用jQuery来console.log点击了什么元素。似乎实际上已经在 或 上进行了点击。所以我的猜测是在 或 上发生了点击事件，然后发生冒泡事件并触发链接。所以弹出链接被触发时出现，但点击另一个元素，所以谷歌标签管理器无法捕获 id。

我可以做些什么来禁用点击内部元素并强制点击<a>标签？

【问题讨论】：

a * { pointer-events: none }
@ChrisG，不，这将禁用链接。
怎么样？它对我来说很好用：jsfiddle.net/khrismuc/5yzf9oqw a * 适用于元素 inside <a>，而不是 <a> 本身。
哦，我的错，我错过了“*”部分。将测试您的答案，谢谢

【解决方案1】：

您能否尝试在 GTM 设置中将“点击触发器”设置为“仅链接”？

【讨论】：