Неправильный запуск события jQuery с мобильных устройств

Question

У меня проблемы с мобильными устройствами со следующим div, link и jQuery:

<div id="div1" style="width:300px;height:100px;">
    <a href="#" id="link1">Link</a>
</div>

<script type="text/javascript">
$('#link1').click(function() {
    alert('Clicked link');
});  

$('#div1').mouseenter(function(){
    alert('Entered div');
});  
</script>

С ПК, если вы наведите курсор мыши на div1, он выдаст предупреждение «Введен div». Когда вы щелкаете ссылку1, появляется предупреждение «Нажатая ссылка». Совершенная.

Однако с мобильного устройства зависание не работает. Это нормально, но когда пользователь нажимает ссылку1, он сначала предупреждает «Введен div». Если они нажимают еще раз, появляется предупреждение "Кликнула ссылка".

Как я могу получить уведомление "Кликнув ссылку" в первый раз, когда пользователь щелкает ссылку1 с мобильного устройства, не жертвуя при этом его работой с рабочего стола?

Answer 1

Добро пожаловать на мобильные устройства:)

Вам необходимо определить функцию, если вы работаете на устройстве с сенсорным экраном и либо не привязываете события мыши, либо напрямую привязываете к событиям касания, чтобы предотвратить их преобразование в щелчки и мышиные центры.

Answer 2

У меня была такая же проблема. Я только что реализовал следующее ...

var is_ios = navigator.userAgent.toLowerCase().match(/(iphone|ipod|ipad)/);

if(!is_ios){ 

  // bind my hover behaviours here

}

добавьте else к этому, если вы хотите сделать что-то специально для iphone / ipad / ipod. В моем случае мне это не нужно.

Answer 3

можете ли вы попробовать, как показано ниже,

, если вы скажете return false, это может остановить распространение, но я не уверен на 100% с мобильными устройствами .. просто попробуйте

$('#link1').click(function() {
    alert('Clicked link');
    return false;
});