У меня есть несколько веб-сайтов, которые я создал несколько раз назад, которые используют события мыши jquery ... Я только что получил ipad, и я заметил, что все события наведения мыши переводятся в щелчки ... так что, например, мне нужно сделать два щелчка вместо одного .. (первое наведение, чем фактический клик)

есть ли способ решить эту проблему? возможно, я использовал команду jquery вместо mouseover / out и т. д. спасибо!

Не тестировал это полностью, но поскольку iOS запускает события касания, это может сработать, если вы находитесь в настройке jQuery.

$('a').on('click touchend', function(e) {
    var el = $(this);
    var link = el.attr('href');
    window.location = link;
});

Идея состоит в том, что Mobile WebKit запускает touchendсобытие в конце нажатия, поэтому мы его отслеживаем, а затем перенаправляем браузер, как только touchendсобытие запускается по ссылке.

Не совсем понятно, в чем ваш вопрос, но если вы просто хотите исключить двойной щелчок, сохранив при этом эффект наведения мыши, мой совет:

• Добавьте эффекты наведения на touchstartи mouseenter.
• Удалить парения воздействие на mouseleave, touchmoveи click.

Задний план

Чтобы имитировать мышь, браузеры, такие как Webkit Mobile, запускают следующие события, если пользователь касается и отпускает палец на сенсорном экране (например, iPad) (источник: Touch And Mouse на html5rocks.com):

1. touchstart
2. touchmove
3. touchend
4. Задержка 300 мс, когда браузер гарантирует, что это одно нажатие, а не двойное нажатие
5. mouseover
6. mouseenter
   • Примечание . Если событие mouseover, mouseenterили mousemoveизменяет содержимое страницы, следующие события никогда не запускаются.
7. mousemove
8. mousedown
9. mouseup
10. click

Невозможно просто указать веб-браузеру пропустить события мыши.

Что еще хуже, если событие наведения указателя мыши изменяет содержимое страницы, событие щелчка никогда не запускается, как объясняется в Safari Web Content Guide - Handling Events , в частности на рисунке 6.4 в One-Finger Events . Что такое «изменение содержимого», будет зависеть от браузера и версии. Я обнаружил, что для iOS 7.0 изменение цвета фона не является (или больше не?) Изменением содержимого.

Объяснение решения

Напомним:

• Добавьте эффекты наведения на touchstartи mouseenter.
• Удалить парения воздействие на mouseleave, touchmoveи click.

Обратите внимание, что на touchend!

Это явно работает для событий мыши: mouseenterи mouseleave(слегка улучшенные версии mouseoverи mouseout) запускаются, а также добавляют и удаляют наведение.

Если пользователь действительно clickпереходил по ссылке, эффект наведения также удаляется. Это гарантирует, что он будет удален, если пользователь нажмет кнопку «Назад» в веб-браузере.

Это также работает для событий касания: touchstartдобавлен эффект наведения. Это '' 'не' '' удалено touchend. Он добавляется снова mouseenter, и, поскольку это не вызывает изменений содержимого (оно уже было добавлено), clickсобытие также запускается, и по ссылке переходят без необходимости повторного нажатия пользователем!

Задержка в 300 мс, которую браузер имеет между touchstartсобытиями, на clickсамом деле хорошо используется, потому что в течение этого короткого времени будет отображаться эффект наведения.

Если пользователь решает отменить щелчок, движение пальца будет происходить как обычно. Обычно это проблема, поскольку mouseleaveсобытие не запускается, а эффект наведения остается на месте. К счастью, это можно легко исправить, убрав эффект зависания touchmove.

Это оно!

Обратите внимание, что можно удалить задержку в 300 мс , например, с помощью библиотеки FastClick , но это выходит за рамки этого вопроса.

Альтернативные решения

Я обнаружил следующие проблемы со следующими альтернативами:

• Обнаружение браузера: Чрезвычайно подвержен ошибкам. Предполагается, что устройство оснащено мышью или сенсорным экраном, в то время как их комбинация станет все более и более распространенной по мере увеличения количества сенсорных дисплеев.
• Обнаружение мультимедиа CSS: единственное известное мне решение только для CSS. По-прежнему подвержен ошибкам и предполагает, что на устройстве есть мышь или сенсорный экран, хотя оба варианта возможны.
• Эмулировать событие щелчка в touchend: это приведет к неправильному переходу по ссылке, даже если пользователь хотел только прокрутить или изменить масштаб без намерения фактически щелкнуть ссылку.
• Использовать переменную для подавления событий мыши: это устанавливает переменную, touchendкоторая используется как условие if в последующих событиях мыши, чтобы предотвратить изменения состояния в этот момент времени. Переменная сбрасывается в событии щелчка. Это достойное решение, если вам действительно не нужен эффект наведения на сенсорные интерфейсы. К сожалению, это не работает, если touchendзапускается по другой причине и не запускается событие щелчка (например, пользователь прокручивает или увеличивает масштаб), а затем пытается перейти по ссылке с помощью мыши (например, на устройстве с интерфейсом мыши и сенсорного экрана). ).

Дальнейшее чтение

• http://jsfiddle.net/macfreek/24Z5M/ . Проверьте это решение на себе в этой песочнице.
• http://www.macfreek.nl/memory/Touch_and_mouse_with_hover_effects_in_a_web_browser . Тот же ответ, но немного подробнее.
• http://www.html5rocks.com/en/mobile/touchandmouse/ . Отличная справочная статья на html5rocks.com о сенсорных экранах и мыши в целом.
• https://developer.apple.com/library/ios/DOCUMENTATION/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html . Руководство по веб-контенту Safari - обработка событий. См., В частности, рисунок 6.4, на котором поясняется, что никакие дальнейшие события не запускаются после изменения содержимого во время события mouseoverили mousemove.

См. Также « Проблема двойного щелчка на iPad / iPhone» и « Отключение эффектов наведения в мобильных браузерах» .

Кажется, все-таки есть решение CSS. Причина, по которой Safari ждет второго касания, заключается в фоновом изображении (или элементах), которое вы обычно назначаете для события: hover. Если показывать нечего - проблем не будет. Решение состоит в том, чтобы настроить таргетинг на платформу iOS с помощью вторичного файла CSS (или стиля в случае подхода JS), который переопределяет: фон наведения для наследования, например, и скрытие элементов, которые вы собирались отображать при наведении мыши:

Вот пример CSS и HTML - блок продукта с пометкой со звездочкой при наведении курсора:

HTML:

<a href="#" class="s"><span class="s-star"></span>Some text here</a>

CSS:

.s {
   background: url(some-image.png) no-repeat 0 0;

}
.s:hover {
   background: url(some-image-r.png) no-repeat 0 0;
}

.s-star {
   background: url(star.png) no-repeat 0 0;
   height: 56px;
   position: absolute;
   width: 72px;
   display:none;
}

.s:hover .s-star {
   display:block;
}

Решение (вторичный CSS):

/* CSS */
/* Keep hovers the same or hidden */
.s:hover {
   background:inherit;
}
.s:hover .s-star {
   display:none;
}

Не нужно усложнять.

$('a').on('touchend', function() {
    $(this).click();
});

Для меня сработало то, что здесь уже говорили другие:

Не отображать / скрывать элементы при наведении или перемещении мыши (что в моем случае является событием).

Вот что говорит Apple ( https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html ):

Активный элемент - это ссылка, элемент формы, область карты изображения или любой другой элемент с обработчиками mousemove, mousedown, mouseup или onclick.

Если пользователь касается интерактивного элемента, события поступают в следующем порядке: наведение курсора, перемещение мыши, перемещение мыши, перемещение курсора мыши и щелчок. Кроме того, если содержимое страницы изменяется при событии mousemove, никакие последующие события в последовательности не отправляются. Такое поведение позволяет пользователю нажимать на новый контент.

Итак, вы можете использовать решение @woop: обнаружить userAgent, проверить, есть ли у него и устройство iOS, а затем привязать событие. В итоге я использовал эту технику, потому что она соответствует моим потребностям и имеет больше смысла не связывать события зависания, когда вы этого не хотите.

Но ... если вы не хотите связываться с userAgents и по-прежнему скрывать / показывать элементы при наведении / перемещении мыши, я обнаружил, что вы можете сделать это, используя собственный javascript, например:

$("body").on("mouseover", function() {
       document.getElementsByTagName("my-class")[0].style.display = 'block'; //show element
       document.querySelector(".my-selector div").style.display = 'none'; // hide element
});

Это будет работать в версии для ПК и ничего не даст в мобильной версии.

И для большей совместимости ...

$("body").on("mouseover", function() {
   if (document.getElementsByTagName && document.querySelector) { // check compatibility
       document.getElementsByTagName("my-class")[0].style.display = 'block'; //show element
       document.querySelector(".my-selector div").style.display = 'none'; // hide element
    } else {
        $(".my-class").show();
        $(".my-selector div").hide();
    }
});

Решение cduruk было довольно эффективным, но вызывало проблемы в некоторых частях моего сайта. Поскольку я уже использовал jQuery для добавления класса CSS hover, самым простым решением было просто не добавлять класс CSS hover на мобильных устройствах (или, точнее, добавлять его ТОЛЬКО, когда НЕ на мобильном устройстве).

Вот общая идея:

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

if (!(ios)) {
    $(".portfolio-style").hover(
        function(){
            $(this).stop().animate({opacity: 1}, 100);
            $(this).addClass("portfolio-red-text");
        },
        function(){
            $(this).stop().animate({opacity: 0.85}, 100);
            $(this).removeClass("portfolio-red-text");
        }
    );
}

* код сокращен для иллюстративных целей

Думаю, было бы разумно попробовать mouseenterвместо mouseover. Это то, что используется внутри при привязке к нему, .hover(fn,fn)и обычно это то, что вам нужно.

У меня были следующие проблемы с существующими решениями, и я нашел то, что, кажется, решает их все. Это предполагает, что вы нацелены на кроссбраузерность, кросс-устройство и не хотите прослушивать устройства.

Проблемы, которые это решает

Используя просто touchstartили touchend:

• Заставляет событие срабатывать, когда люди пытаются прокрутить мимо содержимого и просто случайно зажали этот элемент пальцем, когда они начали смахивать, что неожиданно запускает действие.
• Может вызвать срабатывание события при длительном нажатии , аналогично щелчку правой кнопкой мыши на рабочем столе. Например, если ваше событие щелчка переходит на URL-адрес X, а пользователь долго нажимает, чтобы открыть X на новой вкладке, пользователь будет сбит с толку, обнаружив, что X открыт на обеих вкладках. В некоторых браузерах (например, iPhone) это может даже препятствовать появлению меню при длительном нажатии.

Срабатывание mouseoverсобытия на touchstartи mouseoutна touchmoveимеет менее серьезные последствия, но мешают обычному поведению браузера, например:

• Длительное нажатие вызывает наведение курсора, которое никогда не заканчивается.
• Многие браузеры Android рассматривают расположение пальца touchstartкак значок mouseover, который mouseoutотображается на следующем touchstart. Таким образом, один из способов увидеть содержимое при наведении указателя мыши в Android - это прикоснуться к интересующей области и пошевелить пальцем, слегка прокручивая страницу. Рассмотрение touchmoveкак mouseoutломает это.

Решение

Теоретически вы можете просто добавить флаг touchmove, но iPhone запускает touchmove, даже если нет движения. В теории, можно просто сравнить touchstartи touchendсобытие pageXи , pageY но на айфонов, нет touchend pageXилиpageY .

Так что, к сожалению, охватить все основы оказывается немного сложнее.

$el.on('touchstart', function(e){
    $el.data('tstartE', e);
    if(event.originalEvent.targetTouches){
        // store values, not reference, since touch obj will change
        var touch = e.originalEvent.targetTouches[0];
        $el.data('tstartT',{ clientX: touch.clientX, clientY: touch.clientY } );
    }
});
$el.on('touchmove', function(e){
    if(event.originalEvent.targetTouches){
        $el.data('tstartM', event.originalEvent.targetTouches[0]);
    }
});

$el.on('click touchend', function(e){
    var oldE = $el.data('tstartE');
    if( oldE && oldE.timeStamp + 1000 < e.timeStamp ) {
        $el.data('tstartE',false);
        return;
    }
    if( $el.data('iosTouchM') && $el.data('tstartT') ){
        var start = $el.data('tstartT'), end = $el.data('tstartM');
        if( start.clientX != end.clientX || start.clientY != end.clientY ){
            $el.data('tstartT', false);
            $el.data('tstartM', false);
            $el.data('tstartE',false);
            return;
        }
    }
    $el.data('tstartE',false);

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

Ответ MacFreak был мне чрезвычайно полезен. Вот практический код на случай, если он вам поможет.

ПРОБЛЕМА - применение touchend означает, что каждый раз, когда вы проводите пальцем по элементу, он реагирует так, как если бы вы его нажали, даже если вы просто пытались прокрутить мимо.

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

Вот кнопки:

<a class="menu_button" href="#">
    <div class="menu_underline"></div>
</a>

Я хочу, чтобы div "menu_underline" исчезал при наведении курсора мыши и исчезал при наведении курсора. НО я хочу, чтобы сенсорные устройства могли переходить по ссылке одним щелчком, а не двумя.

РЕШЕНИЕ - Вот jQuery, чтобы он работал:

//Mouse Enter
$('.menu_button').bind('touchstart mouseenter', function(){
    $(this).find(".menu_underline").fadeIn();
});

//Mouse Out   
$('.menu_button').bind('mouseleave touchmove click', function(){
    $(this).find(".menu_underline").fadeOut();
});

Большое спасибо за вашу помощь в этом MacFreak.

Я только что узнал, что это работает, если вы добавляете пустой слушатель, не спрашивайте меня, почему, но я тестировал его на iPhone и iPad с iOS 9.3.2, и он работал нормально.

if(/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){
    var elements = document.getElementsByTagName('a');
    for(var i = 0; i < elements.length; i++){
        elements[i].addEventListener('touchend',function(){});
    }
}

Я «думаю», что у ваших ссылок нет события onmouseover, где 1 нажатие активирует onmouseover, а двойное нажатие активирует ссылку. но идк. У меня нет iPad. Я думаю, вам нужно использовать события жестов / касаний.

https://developer.apple.com/documentation/webkitjs

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

Однако мое решение было таким: при событии щелчка (или касании?) Вы устанавливаете таймер. Если ссылка будет нажата еще раз в течение X мс, вы просто вернете false.

Чтобы установить таймер для каждого элемента, вы можете использовать $.data().

Это также может решить проблему @Ferdy, описанную выше.

Если вы используете Modernizr, использовать Modernizr.touch очень просто, как упоминалось ранее.

Однако я предпочитаю использовать комбинацию Modernizr.touch и тестирования пользовательского агента на всякий случай.

var deviceAgent = navigator.userAgent.toLowerCase();

var isTouchDevice = Modernizr.touch || 
(deviceAgent.match(/(iphone|ipod|ipad)/) ||
deviceAgent.match(/(android)/)  || 
deviceAgent.match(/(iemobile)/) || 
deviceAgent.match(/iphone/i) || 
deviceAgent.match(/ipad/i) || 
deviceAgent.match(/ipod/i) || 
deviceAgent.match(/blackberry/i) || 
deviceAgent.match(/bada/i));

function Tipsy(element, options) {
    this.$element = $(element);
    this.options = options;
    this.enabled = !isTouchDevice;
    this.fixTitle();
};

Если вы не используете Modernizr, вы можете просто заменить Modernizr.touchуказанную выше функцию на('ontouchstart' in document.documentElement)

Также обратите внимание, что тестирование пользовательского агента iemobile предоставит вам более широкий диапазон обнаруженных мобильных устройств Microsoft, чем Windows Phone.

Вы можете использовать click touchend,

пример:

$('a').on('click touchend', function() {
    var linkToAffect = $(this);
    var linkToAffectHref = linkToAffect.attr('href');
    window.location = linkToAffectHref;
});

Приведенный выше пример повлияет на все ссылки на сенсорных устройствах.

Если вы хотите настроить таргетинг только на определенные ссылки, вы можете сделать это, установив для них класс, то есть:

HTML:

<a href="example.html" class="prevent-extra-click">Prevent extra click on touch device</a>

Jquery:

$('a.prevent-extra-click').on('click touchend', function() {
    var linkToAffect = $(this);
    var linkToAffectHref = linkToAffect.attr('href');
    window.location = linkToAffectHref;
});

Ура,

Йерун

Я столкнулся с аналогичной ситуацией, когда у меня были события, привязанные к состояниям mouseenter / mouseleave / click элемента, но на iPhone пользователю приходилось дважды щелкнуть элемент, чтобы сначала вызвать событие mouseenter, а затем снова запустить событие click ,

Я решил эту проблему, используя метод, аналогичный приведенному выше, но я использовал плагин jQuery $ .browser (для jQuery 1.9>) и добавил событие .trigger к событию привязки мыши, как показано ниже:

// mouseenter event
$('.element').on( "mouseenter", function() {
    // insert mouseenter events below

    // double click fix for iOS and mouseenter events
    if ($.browser.iphone || $.browser.ipad) $(this).trigger('click');
});
// mouseleave event
$('.element').on( "mouseleave", function() { 
    // insert mouseout events below
});
// onclick event
$('.element').on( "click", function() {
    // insert click events below
});

.Trigger предотвращает необходимость двойного щелчка по элементу, вызывая обработчик событий .click при вводе курсора мыши (или первом щелчке) элемента при просмотре на iPhone или iPad. Возможно, это не самое элегантное решение, но оно отлично работает в моем случае и использует плагин, который у меня уже был, и потребовал от меня добавить одну строку кода, чтобы мои существующие события работали на этих устройствах.

Вы можете получить плагин jQuery $ .browser здесь: https://github.com/gabceb/jquery-browser-plugin

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

// tablet "one touch (click)" X "hover" > link redirection
$('a').on('touchmove touchend', function(e) {

    // if touchmove>touchend, set the data() for this element to true. then leave touchmove & let touchend fail(data=true) redirection
    if (e.type == 'touchmove') {
        $.data(this, "touchmove_cancel_redirection", true );
        return;
    }

    // if it's a simple touchend, data() for this element doesn't exist.
    if (e.type == 'touchend' && !$.data(this, "touchmove_cancel_redirection")) {
        var el = $(this);
        var link = el.attr('href');
        window.location = link;
    }

    // if touchmove>touchend, to be redirected on a future simple touchend for this element
    $.data(this, "touchmove_cancel_redirection", false );
});

Вдохновленный MacFreak, я собрал кое-что, что мне подходит.

Этот метод js предотвращает залипание при наведении указателя мыши на ipad и в некоторых случаях предотвращает регистрацию щелчка как два щелчка. В CSS, если у вас есть классы: hover psudo в вашем CSS, измените их на .hover. Например .some-class: hover на .some-class.hover

Протестируйте этот код на ipad, чтобы увидеть, как по-разному ведут себя методы наведения CSS и js (только при наведении курсора). У кнопки CSS нет необычного предупреждения о щелчке. http://jsfiddle.net/bensontrent/ctgr6stm/

function clicker(id, doStuff) {
  id.on('touchstart', function(e) {
    id.addClass('hover');
  }).on('touchmove', function(e) {
    id.removeClass('hover');
  }).mouseenter(function(e) {
    id.addClass('hover');
  }).mouseleave(function(e) {
    id.removeClass('hover');
  }).click(function(e) {
    id.removeClass('hover');
    //It's clicked. Do Something
    doStuff(id);
  });
}

function doStuff(id) {
  //Do Stuff
  $('#clicked-alert').fadeIn(function() {
    $(this).fadeOut();
  });
}
clicker($('#unique-id'), doStuff);

button {
  display: block;
  margin: 20px;
  padding: 10px;
  -webkit-appearance: none;
  touch-action: manipulation;
}
.hover {
  background: yellow;
}
.btn:active {
  background: red;
}
.cssonly:hover {
  background: yellow;
}
.cssonly:active {
  background: red;
}
#clicked-alert {
  display: none;
}

<button id="unique-id" class="btn">JS Hover for Mobile devices<span id="clicked-alert"> Clicked</span>

</button>
<button class="cssonly">CSS Only Button</button>
<br>This js method prevents hover from sticking on an ipad, and prevents the click registering as two clicks. In CSS, if you have any :hover in your css, change them to .hover For example .some-class:hover to .some-class.hover

Чтобы ссылки работали без нарушения сенсорной прокрутки, я решил эту проблему с помощью события «касания» jQuery Mobile:

    $('a').not('nav.navbar a').on("tap", function () {
        var link = $(this).attr('href');
        if (typeof link !== 'undefined') {
            window.location = link;
        }
    });

Я слишком поздно, я знаю, но это один из самых простых способов обхода, который я нашел:

    $('body').on('touchstart','*',function(){   //listen to touch
        var jQueryElement=$(this);  
        var element = jQueryElement.get(0); // find tapped HTML element
        if(!element.click){
            var eventObj = document.createEvent('MouseEvents');
            eventObj.initEvent('click',true,true);
            element.dispatchEvent(eventObj);
        }
    });

Это работает не только для ссылок (тегов привязки), но и для других элементов. Надеюсь это поможет.

Этот короткий фрагмент, кажется, работает. Запускать событие клика при нажатии на ссылку:

  $('a').on('touchstart', function() {
    $(this).trigger('click');
  });

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

Я использую это:

var selector = "label, a, button";
var timer;
var startX;
var startY;
$(document).on("click", selector, function (e) {
    if ($(this).data("touched") === true) {
        e.stopImmediatePropagation();
        return false;
    }
    return;
}).on("touchend", selector, function (e) {
    if (Math.abs(startX - e.originalEvent.changedTouches[0].screenX) > 10 || Math.abs(startY - e.originalEvent.changedTouches[0].screenY) > 10)
        // user action is not a tap
        return;
    var $this = $(this);
    // Visit: http://stackoverflow.com/questions/1694595/can-i-call-jquery-click-to-follow-an-a-link-if-i-havent-bound-an-event-hand/12801548#12801548
    this.click();
    // prevents double click
    $this.data("touched", true);
    if (timer)
        clearTimeout(timer);
    setTimeout(function () {
        $this.data("touched", false);
    }, 400);
    e.stopImmediatePropagation();
    return false;
}).on("touchstart", function (e) {
    startX = e.originalEvent.changedTouches[0].screenX;
    startY = e.originalEvent.changedTouches[0].screenY;
});

Это работает для меня, когда у вас есть раскрывающийся список jquery ui

if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
      $('.ui-autocomplete').off('menufocus hover mouseover');
}

Избегайте изменения стиля "отображения" внутри события hover css. У меня был "дисплей: блок" в состоянии наведения. После удаления ios пошел на линзы одним нажатием. Кстати, похоже, что последние обновления iOS исправили эту "фичу"

Самый простой способ разрешить двойной щелчок на IPad - обернуть ваш css для эффекта наведения в медиа-запросе @media (pointer: fine):

@media (pointer: fine) {
  a span {
    display: none;
  }
  a:hover span {
    display: inline-block;
  }
}

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

Объяснение этого решения здесь https://css-tricks.com/annoying-mobile-double-tap-link-issue/

Проверить можно navigator.userAgentтак:

if(!navigator.userAgent.match(/iPhone/i) || !navigator.userAgent.match(/iPad/i)) {
    //bind your mouseovers...
}

но вам придется проверить наличие ежевики, дроидов и других устройств с сенсорным экраном. Вы также можете привязать наведение указателя мыши только в том случае, если userAgent содержит Mozilla, IE, Webkit или Opera, но вам все равно нужно проверять некоторые устройства, потому что Droid, например, сообщает свою строку userAgent как:

Mozilla/5.0 (Linux; U; Android 2.0.1; en-us; Droid Build/ESD56) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17

Строка iPhone аналогична. Если вы просто просматриваете iPhone, iPod, iPad, Android и Blackberry, вы можете получить большинство карманных компьютеров, но не все из них.

Просто сделайте медиа-запрос CSS, который исключает планшеты и мобильные устройства, и поместите туда курсор. Для этого вам действительно не нужны jQuery или JavaScript.

@media screen and (min-device-width:1024px) {
    your-element:hover {
        /* Do whatever here */
    }
}

И не забудьте добавить это в заголовок HTML, чтобы убедиться, что он рассчитывается с фактическими пикселями, а не с разрешением.

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />