Mobile Safari иногда не вызывает событие click

Это динамическое приложение JavaScript, над которым я работаю. У меня есть много якорных элементов <a>, которые имеют класс. Когда щелкнет тот класс, что-то должно произойти. Это отлично работает в Firefox, Chrome, IE, но в некоторых случаях событие нажатия не запускается на мобильном Safari (iPad и iPhone).

Все эти элементы имеют одинаковый CSS, только их расположение отличается (они находятся в разных контейнерах).

Я пробовал разные решения, которые нашел здесь, но безуспешно. Например:

установка курсора на указатель
код в этом ответе

У вас есть другая идея, которая может помочь мне найти решение этой проблемы? Почему событие click срабатывает только в некоторых случаях?

Ответ 1

Событие click, вызванное нажатием на iOS, будет пузыриться, как ожидалось, в определенных условиях - один из которых вы упомянули, стиль курсора. Вот еще один:

Целевой элемент или любой из его предков до, но не включая <body>, имеет явный обработчик событий, установленный для любой мыши Мероприятия. Этот обработчик событий может быть пустой функцией.

http://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html

Это намного лучше фиксирует вектор и может быть выполнен без проверки браузера. Вам нужно добавить дополнительный div из-за части "не включая <body>":

<body>
  <div onclick="void(0);">
    <!-- ... all your normal body content ... -->
  </div>
</body>

Теперь каждое событие click, происходящее внутри этого div, будет пузыриться, как ожидалось, в iOS (это означает, что вы можете поймать их с помощью $(document).on('click', '.class', etc...)).

Ответ 2

Вы пробовали это? Это связано с тем, что ios не запускает событие click иногда, только распознает событие касания

$(document).on('touchstart click', [Selector], [ Event ]

Ответ 3

Просто объявление этих пустых слушателей событий делает свое дело. Просто попробуйте :)

Это заставит его работать во всех браузерах:

container.addEventListener('touchstart', () => {});
container.addEventListener('touchend', () => {});
container.addEventListener('touchcancel', () => {});
container.addEventListener('touchmove', () => {});

Ответ 4

Это сумасшедший вопрос, и действительно, ответ LinusR и описание в режиме quirksmode точны. Мой общий слушатель событий щелчка не работал из-за этого в iOS Safari:

window.addEventListener('click', function(event) {
    alert("Where my click?!");
});

Теперь я обернул мое приложение <div onclick="void(0);"></div> и это работает. Я также добавил несколько дополнительных вещей, чтобы исправить некоторые проблемы, которые из этого вышли:

<div onclick="void(0);" style="height: 100%; -webkit-tap-highlight-color: transparent;">
  <div style="height: 100%; -webkit-tap-highlight-color: initial;">
    <my-app></my-app>
  </div>
</div>

Мне нужна height: 100%; сделать клик доступным на всей странице, потому что мне это нужно. Если вы не делаете height: 100%; событие click будет по-прежнему срабатывать только в пределах высоты div.

-webkit-tap-highlight-color: transparent; заключается в том, чтобы предотвратить стиль наложения флэш-памяти onclick, так как iOS делает это по умолчанию с интерактивными элементами. После этого div восстанавливает начальное значение этого свойства CSS, так что другие интерактивные элементы имеют нормальное поведение в этом отношении. Смотрите этот ответ для получения дополнительной информации.

Ответ 5

Существует дополнительное событие для мобильных устройств. Попробуйте добавить прослушиватель событий tap в дополнение к событию click. Они могут быть прикреплены одновременно со следующим:

$(document).on('click tap', [selector], [handler])