Проблема с зависанием iPad / iPhone заставляет пользователя дважды щелкнуть ссылку

125

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

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

Francesco
источник
1
с чем связаны ваши мероприятия? например, события onclick должны работать нормально ... onmouseover, onmouseout и CSS: hover - это те, с которыми немного сложно справиться, поскольку для сенсорного экрана нет «зависания». У вас есть образец кода?
scunliffe
Я бы посоветовал вам переосмыслить интерфейс, если это вообще возможно. взаимодействие на ipad / iphone не совсем соответствует взаимодействию на компьютере, и, вероятно, будет разумным сделать так, чтобы ваш веб-сайт выглядел так, как будто он был написан для ipad / iphone / других сенсорных устройств с аналогичными механизмами мультитач. Просто мысль.
jer
Я согласен с "jer". Это странный вопрос, лично я не думаю, что решение здесь является "обходным путем". Я думаю, что перевод «наведения мыши» в браузере настольного компьютера на «касание пальцем» в браузере с сенсорным экраном имеет смысл. Если вы согласны с этим переводом, но хотите одно касание вместо двух, тогда я, вероятно, сделаю обнаружение функций для событий iPad (например, «touchstart») и изменил ваши обработчики событий. Возможно, извлеките свой код в плагин jquery, который работает по-разному в зависимости от функций, но мне кажется, специфичным для вашего веб-сайта / приложения.
Энди Аткинсон,
1
Я вообще считаю этот перевод особенностью. Если у вас были настроены события наведения, должна быть какая-то утилита для их просмотра. Одно нажатие показывает зависший элемент, второе нажатие следует по ссылке «позади» наведения.
Аарон

Ответы:

205

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

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

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

cduruk
источник
17
Где моя награда? : P
cduruk 06
2
Терпение, Падван. SO сказал, что для вступления в силу потребуется 24 часа.
Эндрю Хеджес
2
Начиная с jQuery 1.7, .onпредпочтительнее .live. Прочитав этот ответ, я обнаружил, что изменение моего кода $('a').on('click touchend', function(e) {...})работает отлично.
Blazemonger
23
Что ж, это решает первоначальную проблему, но создает новую: при смахивании по ним щелкают. Это не выход.
luksak
9
В этом есть свои недостатки. Если щелкнуть ссылку, target="_blank"она откроется в том же окне И в новом окне.
rybo111
37

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

  • Добавьте эффекты наведения на 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запускается по другой причине и не запускается событие щелчка (например, пользователь прокручивает или увеличивает масштаб), а затем пытается перейти по ссылке с помощью мыши (например, на устройстве с интерфейсом мыши и сенсорного экрана). ).

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

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

MacFreek
источник
2
кажется лучшим объяснением для тех, кто хочет большего, чем точное решение проблемы. Thanx
antiplayer
Отдельное спасибо за информацию о цвете фона для> iOS7. Я потратил некоторое время, пытаясь понять, когда это начало работать.
Staffang
20

Кажется, все-таки есть решение 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;
}
Павел Богатинов
источник
Этот ответ ориентирован на фоновые изображения, но есть ли у вас решение для простого изменения прозрачности? Это решение не работает.
Ian S
5

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

$('a').on('touchend', function() {
    $(this).click();
});
Jsonras
источник
5

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

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

Вот что говорит 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();
    }
});
Adauto
источник
1
Этот бит «если содержимое страницы изменяется при событии mousemove, никакие последующие события в последовательности не отправляются» действительно помог мне. У меня была страница, на которой ссылки заголовка требовали двойного нажатия, а кнопки в контенте (со всеми счастливыми переходами css3 на em) требовали всего лишь одного нажатия. Оказалось, что в ссылках заголовка был псевдоэлемент, который менялся от непрозрачности: 0 до непрозрачности: 1 при наведении курсора. Удаление этого эффекта немедленно решило проблему, и я нашел обходной путь CSS, который по-прежнему обеспечивает желаемый вид.
Fake Haak
3

Решение 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");
        }
    );
}

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

Woop
источник
1
Это очевидный ответ. Другие «решения» не решают проблему. iOS Safari явно ошибочен в том, что мы сначала хотим навести курсор мыши. В других ОС есть функции наведения курсора, когда вы наводите курсор на элемент.
Джошуа Пак
Это единственное, что у меня сработало. Спасибо вам большое!
tx291 08
2

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

Пол Айриш
источник
1

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

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

Используя просто 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 в качестве приближения, но на практике это не так просто, и лучше использовать разумный прокси .

user56reinstatemonica8
источник
1

Ответ 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.

Бешеный пес Кадоген
источник
1

Я только что узнал, что это работает, если вы добавляете пустой слушатель, не спрашивайте меня, почему, но я тестировал его на 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(){});
    }
}
Фрик Ван дер Ванд
источник
1

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

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

альберт
источник
0

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

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

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

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

Ионуй Стайку
источник
Вы можете опубликовать, как выглядит этот код? У меня проблема с запуском события щелчка дважды.
fancy
0

Если вы используете 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.

Питер Пэн
источник
0

Вы можете использовать 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;
});

Ура,

Йерун

Йерун В
источник
0

Я столкнулся с аналогичной ситуацией, когда у меня были события, привязанные к состояниям 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

планшетка для спиритических сеансов
источник
0

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

// 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 );
});
Lenor
источник
0

Вдохновленный 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

Бенсон
источник
0

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

    $('a').not('nav.navbar a').on("tap", function () {
        var link = $(this).attr('href');
        if (typeof link !== 'undefined') {
            window.location = link;
        }
    });
лосей
источник
0

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

    $('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);
        }
    });

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

writeToBhuwan
источник
0

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

  $('a').on('touchstart', function() {
    $(this).trigger('click');
  });
Flo Develop
источник
0

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

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

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;
});
Маг
источник
0

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

if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
      $('.ui-autocomplete').off('menufocus hover mouseover');
}
Makubex
источник
0

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

Hellbyte
источник
0

Самый простой способ разрешить двойной щелчок на 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/

Галина
источник
-1

Проверить можно 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, вы можете получить большинство карманных компьютеров, но не все из них.

jasongetsdown
источник
Я думаю, что на данный момент, чтобы не сходить с ума, лучше всего было бы просто скрипт, который пропускает события наведения ... так что, я думаю, первый ответ был хорош ... и да, вы правы ... я должен подумайте обо всех других устройствах ... я бы хотел, чтобы JQuery или какой-нибудь плагин имел такую ​​функцию dection ..!
Francesco
wurfl.sourceforge.net Возможно, это ваш ответ. Это база данных беспроводных устройств. Это будет не так просто, как плагин jQuery, но вы всегда можете написать его! Также существует tera-wurfl.com, который использует базу данных, а не файл xml. Не очень много копался, но может быть размещенная версия, поэтому вам не нужно беспокоиться о том, чтобы поддерживать ваш файл wurfl или базу данных tera-wurfl в актуальном состоянии.
jasongetsdown
1
Я что-то упустил или вопрос был НЕ об обнаружении iPad, а о работе с определенным поведением на iPad?
Эндрю Хеджес
5
UA нюхает? How 90's: P
Macha
-1

Просто сделайте медиа-запрос 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" />
Далибора
источник