Мобильный сафари - PullRequest
Новая
       28

Мобильный сафари

6 голосов
/ 13 июля 2010

Я разработал сайт с меню, которое изначально невидимо. Когда пользователь нажимает кнопку, меню становится видимым. Пользователь может скрыть отображаемое меню двумя способами:

  1. Нажмите кнопку, из-за которой меню стало видимым
  2. Нажмите в любом месте на веб-странице, которая не является меню

То, как я кодировал второй вариант, - это связать событие onclick с элементом window и сравнить его там, где пользователь щелкнул позицию меню, чтобы определить, должно ли меню быть скрыто. Это прекрасно работает в Firefox и Safari, но не работает в Mobile Safari.

Я заметил, что событие onclick окна срабатывает, только когда я щелкаю по другому элементу с уже назначенным событием onclick. Если я щелкаю по элементу без назначенных событий, событие onclick в window никогда не срабатывает. Если я нажимаю на кнопку, которая отображает меню, оно запускается вместе с событием, связанным с кнопкой.

Можно ли назначать события элементу window в Mobile Safari?

Ответы [ 5 ]

7 голосов
/ 14 февраля 2011

Я столкнулся с этой же проблемой. Вот что сработало для меня. (Примечание: я работаю в контексте Modernizr и jQuery)

Сначала я добавляю собственный класс Modernizr, используя API плагина ModernTr addTest для тестирования на iOS, который добавит класс appleios или no-appleios соответственно.

Поскольку в моем исследовании body, кажется, запускает события в своей собственной повестке дня, я принимаю небольшую предосторожность, оборачивая все содержимое документа элементом в контексте iOS. Затем я добавляю обработчик событий к этому элементу. 

$(".appleios body").wrapInner('<div id="appleios-helper" />');
$("#appleios-helper").bind("mouseup", function(){return;});

То, что было предложено ранее в этой теме, использует void(0). Я провел небольшое быстрое тестирование и обнаружил, что void(0), поскольку событие просто не вызывает распознавания прикосновений к телу. Когда я подключил свою собственную «пустую» функцию в виде function(){return;} все заработало.

Все это зависит от того факта, что в Mobile Safari не запускаются никакие события, если только у элемента нет явных событий для запуска ( Руководство по веб-контенту Safari .) При вставке этого пустого события в оболочку все будет пузыриться до тела.

Если вы используете простой JavaScript без какой-либо из этих библиотек, тот же эффект может быть достигнут в разметке HTML 

<html>
...
<body>
<div id="appleios-helper" onmouseup="function(){return;}">
...
</div>
</body>
</html>

Это помогло мне скрыть всплывающие подсказки при касании в любом месте тела документа. Ваш пробег может варьироваться.

1 голос
/ 03 декабря 2013

Это старый вопрос, но сегодня я боролся с тем же.

Я обнаружил, что использование события touchstart работает.

Я решил это так: 

var isTouchDevice = 'ontouchstart' in document.documentElement;
if (isTouchDevice) {
  // Do touch related stuff
  $(document).on('touchstart', function (event) {
    // Do stuff
  });
} else {
  // Do non-touch related stuff
  $(document).on('click', function () {
    // Do stuff
  });
}
1 голос
/ 09 мая 2011

Простое добавление фиктивного обработчика onclick в html body работает для меня: 

<body onclick="void(0)">

Обратите внимание, что я использую обычные обработчики живых событий, как показано ниже: 

function liveHandler( event ) {
    var target = event.target; ...}

window.addEventListener(evtype, liveHandler, true);
// evtype such as 'mousedown' or 'click'
// we use the capturing mode here (third parameter true)
0 голосов
/ 12 ноября 2014

Вы также можете: 

$('body').css('cursor', 'pointer');

Понятия не имею, что делают эти «инженеры» в Apple. LOL.

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

Источник: http://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html

Вывод статьи таков:

Так что я не понимаю, почему все это так, но это, безусловно, так. Если у вас возникли проблемы с пузырями, просто добавьте обработчик событий пустой функции в любом месте между телом и элементом, и вы готовы к работе. Но это не должно быть необходимым.

0 голосов
/ 16 июля 2010

Вы можете просто добавить onclick="void(0);" к некоторому <div>, который охватывает всю страницу, так что, несмотря ни на что, вы всегда нажимаете на элемент с событием onclick.Хотя это не очень хорошее решение.

Я бы предпочел, чтобы событие onclick не было привязано к окну.Почему бы вам не создать контейнер <div> с этим событием.Тогда справляйся, как и сейчас.

...