Ссылка с наложением наложения открывается при первом нажатии на мобильное устройство

Question

У меня есть div, который отображает другое содержимое при наведении с использованием css-переходов.

Существует один текстовый элемент <h3>Another Text</h3>, который накладывает ссылку <a href="mailto:x@x.x">email adress</a>. В настольном браузере он работает правильно - я могу щелкнуть ссылку после активирования зависания. На телефоне, где наведение заменяется щелчком по элементу, возникает проблема. Если я активирую зависание, нажав «Другой текст», он сразу откроет ссылку.

Мой вопрос в том, есть ли способ ограничить открытие ссылок при первом нажатии. Идеальный сценарий по телефону устройства:

1. пользователь нажимает на «другой текст»
2. парения активируется, ссылка displayedbut не уволили
3. пользователя ссылку щелчка и ссылку обжигают

Здесь является кодом: https://jsfiddle.net/9bc0bcja/2/

Answer 1

Я частично решил его использовать javscript:

$(".team-social") 
.bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", 
function(e){ 
    if($(this).hasClass("pointerA")){ 
    if(is_touch_device()){ 
     $(this).removeClass("pointerA"); 
    } 
    } 
    else{ 
    $(this).addClass("pointerA"); 
    } 
}); 
$('.team-social a').click(function() { 
if(is_touch_device()){ 
    $(this).parent().removeClass("pointerA"); 
} 
}); 

Он активирует события-указатели после завершения перехода, поэтому он не запускается сразу, когда я нажимаю наложение на телефонном устройстве.

https://jsfiddle.net/9bc0bcja/4/

• добавил JavaScript + JQuery ссылка
• добавлен класс .pointerA
• добавил pointer-events:none; к классу .team-social

Answer 2

Try this Fiddle.

Я упростил свой код, сохраняя только необходимые элементы.

Этот скрипт работает только в том случае, если вы используете мобильное устройство, что вам нужно по соображениям производительности.

Этот код отслеживает событие зависания, а не переходEnd, таким образом, время запуска функции не зависит от длины перехода.

if (is_touch_device()) { 
    var $wrap = $(".wrap"), 
     $pw = $wrap.find(".pointer-watch"), 
     $tc = $pw.find(".transition-container"); 

    $pw.addClass("pointerN"); 
    $('.wrap').hover(function wrapHovered() { 
     if ($pw.hasClass("pointerN")){ 
      setTimeout(function enablePE() { 
       $pw.removeClass("pointerN"); 
      }, 0); 
     } 
     else if (!$wrap.is(":hover")) { 
      $pw.addClass("pointerN"); 
     } 
    }); 
}