Наша команда использует менеджер тегов Google (или что-то в этом роде), чтобы отслеживать, какой номер телефона или кнопку нажимает пользователь. Этот инструмент требует, чтобы элементы имели id.
Когда мы нажимаем на простую ссылку, без <i> или <span>, все в порядке. Получаем id, ссылка работает, появляется всплывающее окно с "call" или "cancel".
Однако с уценкой все не так просто:
<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 не может поймать идентификатор.
Что можно сделать, чтобы отключить щелчок на внутренних элементах и принудительно нажать на тег <a>?