Событие ‘click’ не срабатывает на iPhone и некоторых мобильных браузерах – решение проблемы

Часто в мобильной версии сайта используется кнопка типа “бургера” для вызова основного меню сайта. На эту кнопку вешается событие 'click' с обработчиком – вызовом функции, которая отобразит меню.

Например, такой очень упрощенный код:

$(".btn-menu").on("click", function() {
  $(".menu").slideToggle("slow");
});

При тестировании на десктопе в мобильном формате всё работает как надо, но в некоторых мобильных браузерах событие 'click' не срабатывает, и, соответственно, меню не открывается. Тогда к событию 'click' добавим событие 'touchend' для сенсорных устройств.

Получится такой код:

$(".btn-menu").on("click touchend", function() {
  $(".menu").slideToggle("slow");
});

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

Связано это с тем, что событие 'touchend' в некоторых мобильных браузерах вызывается с задержкой (delay) в 300-350 мс между касанием и нажатием, чтобы увидеть, будет ли это двойное касание или нет, поскольку двойное касание было жестом для увеличения текста. И таким образом при одном клике срабатывает 2 события за 300ms сначала 'click', а затем 'touchend'.

Для решения этой проблемы я видел множество примеров с флагами, фильтрами и кучей функций, а кто-то даже плагин написал, чтобы различать, было касание с помощью сенсора или это был клик мыши, но на самом деле, решается все гораздо проще, простым добавлением return false;.

Окончательный рабочий код для вызова функции при клике мышкой или касании на мобильных (сенсорных) устройствах:

$(".btn-menu").on("click touchend", function() {
  $(".menu").slideToggle("slow");
  return false;
});

Рабочий пример вызова функции при клике мышкой или касании на мобильных устройствах на CodePen:

See the Pen events ‘click touchstart’ by Denis (@deniscreative) on CodePen.0