У меня есть несколько веб-сайтов, которые я создал несколько раз назад, которые используют события мыши jquery ... Я только что получил ipad, и я заметил, что все события наведения мыши переводятся в щелчки ... так что, например, мне нужно сделать два щелчка вместо одного .. (первое наведение, чем фактический клик)
есть ли способ решить эту проблему? возможно, я использовал команду jquery вместо mouseover / out и т. д. спасибо!
Ответы:
Не тестировал это полностью, но поскольку iOS запускает события касания, это может сработать, если вы находитесь в настройке jQuery.
Идея состоит в том, что Mobile WebKit запускает
touchend
событие в конце нажатия, поэтому мы его отслеживаем, а затем перенаправляем браузер, как толькоtouchend
событие запускается по ссылке.источник
.on
предпочтительнее.live
. Прочитав этот ответ, я обнаружил, что изменение моего кода$('a').on('click touchend', function(e) {...})
работает отлично.target="_blank"
она откроется в том же окне И в новом окне.Не совсем понятно, в чем ваш вопрос, но если вы просто хотите исключить двойной щелчок, сохранив при этом эффект наведения мыши, мой совет:
touchstart
иmouseenter
.mouseleave
,touchmove
иclick
.Задний план
Чтобы имитировать мышь, браузеры, такие как Webkit Mobile, запускают следующие события, если пользователь касается и отпускает палец на сенсорном экране (например, iPad) (источник: Touch And Mouse на html5rocks.com):
touchstart
touchmove
touchend
mouseover
mouseenter
mouseover
,mouseenter
илиmousemove
изменяет содержимое страницы, следующие события никогда не запускаются.mousemove
mousedown
mouseup
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 , но это выходит за рамки этого вопроса.
Альтернативные решения
Я обнаружил следующие проблемы со следующими альтернативами:
touchend
: это приведет к неправильному переходу по ссылке, даже если пользователь хотел только прокрутить или изменить масштаб без намерения фактически щелкнуть ссылку.touchend
которая используется как условие if в последующих событиях мыши, чтобы предотвратить изменения состояния в этот момент времени. Переменная сбрасывается в событии щелчка. Это достойное решение, если вам действительно не нужен эффект наведения на сенсорные интерфейсы. К сожалению, это не работает, еслиtouchend
запускается по другой причине и не запускается событие щелчка (например, пользователь прокручивает или увеличивает масштаб), а затем пытается перейти по ссылке с помощью мыши (например, на устройстве с интерфейсом мыши и сенсорного экрана). ).Дальнейшее чтение
mouseover
илиmousemove
.См. Также « Проблема двойного щелчка на iPad / iPhone» и « Отключение эффектов наведения в мобильных браузерах» .
источник
Кажется, все-таки есть решение CSS. Причина, по которой Safari ждет второго касания, заключается в фоновом изображении (или элементах), которое вы обычно назначаете для события: hover. Если показывать нечего - проблем не будет. Решение состоит в том, чтобы настроить таргетинг на платформу iOS с помощью вторичного файла CSS (или стиля в случае подхода JS), который переопределяет: фон наведения для наследования, например, и скрытие элементов, которые вы собирались отображать при наведении мыши:
Вот пример CSS и HTML - блок продукта с пометкой со звездочкой при наведении курсора:
HTML:
CSS:
Решение (вторичный CSS):
источник
Не нужно усложнять.
источник
Для меня сработало то, что здесь уже говорили другие:
Не отображать / скрывать элементы при наведении или перемещении мыши (что в моем случае является событием).
Вот что говорит Apple ( https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html ):
Итак, вы можете использовать решение @woop: обнаружить userAgent, проверить, есть ли у него и устройство iOS, а затем привязать событие. В итоге я использовал эту технику, потому что она соответствует моим потребностям и имеет больше смысла не связывать события зависания, когда вы этого не хотите.
Но ... если вы не хотите связываться с userAgents и по-прежнему скрывать / показывать элементы при наведении / перемещении мыши, я обнаружил, что вы можете сделать это, используя собственный javascript, например:
Это будет работать в версии для ПК и ничего не даст в мобильной версии.
И для большей совместимости ...
источник
Решение cduruk было довольно эффективным, но вызывало проблемы в некоторых частях моего сайта. Поскольку я уже использовал jQuery для добавления класса CSS hover, самым простым решением было просто не добавлять класс CSS hover на мобильных устройствах (или, точнее, добавлять его ТОЛЬКО, когда НЕ на мобильном устройстве).
Вот общая идея:
* код сокращен для иллюстративных целей
источник
Думаю, было бы разумно попробовать
mouseenter
вместоmouseover
. Это то, что используется внутри при привязке к нему,.hover(fn,fn)
и обычно это то, что вам нужно.источник
У меня были следующие проблемы с существующими решениями, и я нашел то, что, кажется, решает их все. Это предполагает, что вы нацелены на кроссбраузерность, кросс-устройство и не хотите прослушивать устройства.
Проблемы, которые это решает
Используя просто
touchstart
илиtouchend
:Срабатывание
mouseover
события наtouchstart
иmouseout
наtouchmove
имеет менее серьезные последствия, но мешают обычному поведению браузера, например:touchstart
как значокmouseover
, которыйmouseout
отображается на следующемtouchstart
. Таким образом, один из способов увидеть содержимое при наведении указателя мыши в Android - это прикоснуться к интересующей области и пошевелить пальцем, слегка прокручивая страницу. Рассмотрениеtouchmove
какmouseout
ломает это.Решение
Теоретически вы можете просто добавить флаг
touchmove
, но iPhone запускает touchmove, даже если нет движения. В теории, можно просто сравнитьtouchstart
иtouchend
событиеpageX
и ,pageY
но на айфонов, нетtouchend
pageX
илиpageY
.Так что, к сожалению, охватить все основы оказывается немного сложнее.
Теоретически есть способы получить точное время, используемое для длительного нажатия, вместо того, чтобы просто использовать 1000 в качестве приближения, но на практике это не так просто, и лучше использовать разумный прокси .
источник
Ответ MacFreak был мне чрезвычайно полезен. Вот практический код на случай, если он вам поможет.
ПРОБЛЕМА - применение touchend означает, что каждый раз, когда вы проводите пальцем по элементу, он реагирует так, как если бы вы его нажали, даже если вы просто пытались прокрутить мимо.
Я создаю эффект с помощью jQuery, который затемняет строку под некоторыми кнопками, чтобы «выделить» зависшую кнопку. Я не хочу, чтобы это означало, что вам нужно дважды нажать кнопку на сенсорных устройствах, чтобы перейти по ссылке.
Вот кнопки:
Я хочу, чтобы div "menu_underline" исчезал при наведении курсора мыши и исчезал при наведении курсора. НО я хочу, чтобы сенсорные устройства могли переходить по ссылке одним щелчком, а не двумя.
РЕШЕНИЕ - Вот jQuery, чтобы он работал:
Большое спасибо за вашу помощь в этом MacFreak.
источник
Я только что узнал, что это работает, если вы добавляете пустой слушатель, не спрашивайте меня, почему, но я тестировал его на iPhone и iPad с iOS 9.3.2, и он работал нормально.
источник
Я «думаю», что у ваших ссылок нет события onmouseover, где 1 нажатие активирует onmouseover, а двойное нажатие активирует ссылку. но идк. У меня нет iPad. Я думаю, вам нужно использовать события жестов / касаний.
https://developer.apple.com/documentation/webkitjs
источник
У меня была такая же проблема, но не на сенсорном устройстве. Событие запускается каждый раз при нажатии. Есть кое-что о очереди событий или около того.
Однако мое решение было таким: при событии щелчка (или касании?) Вы устанавливаете таймер. Если ссылка будет нажата еще раз в течение X мс, вы просто вернете false.
Чтобы установить таймер для каждого элемента, вы можете использовать
$.data()
.Это также может решить проблему @Ferdy, описанную выше.
источник
Если вы используете Modernizr, использовать Modernizr.touch очень просто, как упоминалось ранее.
Однако я предпочитаю использовать комбинацию Modernizr.touch и тестирования пользовательского агента на всякий случай.
Если вы не используете Modernizr, вы можете просто заменить
Modernizr.touch
указанную выше функцию на('ontouchstart' in document.documentElement)
Также обратите внимание, что тестирование пользовательского агента iemobile предоставит вам более широкий диапазон обнаруженных мобильных устройств Microsoft, чем Windows Phone.
источник
Вы можете использовать
click touchend
,пример:
Приведенный выше пример повлияет на все ссылки на сенсорных устройствах.
Если вы хотите настроить таргетинг только на определенные ссылки, вы можете сделать это, установив для них класс, то есть:
HTML:
<a href="example.html" class="prevent-extra-click">Prevent extra click on touch device</a>
Jquery:
Ура,
Йерун
источник
Я столкнулся с аналогичной ситуацией, когда у меня были события, привязанные к состояниям mouseenter / mouseleave / click элемента, но на iPhone пользователю приходилось дважды щелкнуть элемент, чтобы сначала вызвать событие mouseenter, а затем снова запустить событие click ,
Я решил эту проблему, используя метод, аналогичный приведенному выше, но я использовал плагин jQuery $ .browser (для jQuery 1.9>) и добавил событие .trigger к событию привязки мыши, как показано ниже:
.Trigger предотвращает необходимость двойного щелчка по элементу, вызывая обработчик событий .click при вводе курсора мыши (или первом щелчке) элемента при просмотре на iPhone или iPad. Возможно, это не самое элегантное решение, но оно отлично работает в моем случае и использует плагин, который у меня уже был, и потребовал от меня добавить одну строку кода, чтобы мои существующие события работали на этих устройствах.
Вы можете получить плагин jQuery $ .browser здесь: https://github.com/gabceb/jquery-browser-plugin
источник
Просто улучшение, чтобы избежать перенаправления, когда вы по ошибке проводите пальцем по ссылке.
источник
Вдохновленный MacFreak, я собрал кое-что, что мне подходит.
Этот метод js предотвращает залипание при наведении указателя мыши на ipad и в некоторых случаях предотвращает регистрацию щелчка как два щелчка. В CSS, если у вас есть классы: hover psudo в вашем CSS, измените их на .hover. Например .some-class: hover на .some-class.hover
Протестируйте этот код на ipad, чтобы увидеть, как по-разному ведут себя методы наведения CSS и js (только при наведении курсора). У кнопки CSS нет необычного предупреждения о щелчке. http://jsfiddle.net/bensontrent/ctgr6stm/
источник
Чтобы ссылки работали без нарушения сенсорной прокрутки, я решил эту проблему с помощью события «касания» jQuery Mobile:
источник
Я слишком поздно, я знаю, но это один из самых простых способов обхода, который я нашел:
Это работает не только для ссылок (тегов привязки), но и для других элементов. Надеюсь это поможет.
источник
Этот короткий фрагмент, кажется, работает. Запускать событие клика при нажатии на ссылку:
источник
Ни один из других ответов не работает для меня. В моем приложении много прослушивателей событий, собственных флажков и ссылок с прослушивателем и ссылок без прослушивателя.
Я использую это:
источник
Это работает для меня, когда у вас есть раскрывающийся список jquery ui
источник
Избегайте изменения стиля "отображения" внутри события hover css. У меня был "дисплей: блок" в состоянии наведения. После удаления ios пошел на линзы одним нажатием. Кстати, похоже, что последние обновления iOS исправили эту "фичу"
источник
Самый простой способ разрешить двойной щелчок на IPad - обернуть ваш css для эффекта наведения в медиа-запросе
@media (pointer: fine)
:CSS, заключенный в этот медиа-запрос, будет применяться только на рабочем столе.
Объяснение этого решения здесь https://css-tricks.com/annoying-mobile-double-tap-link-issue/
источник
Проверить можно
navigator.userAgent
так:но вам придется проверить наличие ежевики, дроидов и других устройств с сенсорным экраном. Вы также можете привязать наведение указателя мыши только в том случае, если userAgent содержит Mozilla, IE, Webkit или Opera, но вам все равно нужно проверять некоторые устройства, потому что Droid, например, сообщает свою строку userAgent как:
Строка iPhone аналогична. Если вы просто просматриваете iPhone, iPod, iPad, Android и Blackberry, вы можете получить большинство карманных компьютеров, но не все из них.
источник
Просто сделайте медиа-запрос CSS, который исключает планшеты и мобильные устройства, и поместите туда курсор. Для этого вам действительно не нужны jQuery или JavaScript.
И не забудьте добавить это в заголовок HTML, чтобы убедиться, что он рассчитывается с фактическими пикселями, а не с разрешением.
источник