单击内部带有“ i”和“ span”的链接

时间:2018-11-07 09:33:41

标签: javascript jquery event-bubbling

我们的团队使用Google跟踪代码管理器(或类似的工具)来跟踪用户将点击的电话号码或按钮。此工具要求元素具有id

当我们单击简单链接时,如果没有链接<i><span>,一切正常。我们得到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单击了什么元素。看来实际上是在<span><i>上进行了单击。因此,我的猜测是,在<span><i>上进行了点击事件,然后发生了冒泡事件并触发了链接。因此,当链接被触发时,弹出窗口就会出现,但是在另一个元素上进行了点击,因此Google跟踪代码管理器无法捕获ID。

我该怎么做才能禁用对内部元素的单击并强制单击<a>标签?

1 个答案:

答案 0 :(得分:1)

您可以尝试在GTM设置中将“点击触发器”设置为“仅链接”吗?

参考:Capturing The Correct Element In Google Tag Manager

相关问题