Функция .click для сенсорного устройства.

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

Настройка моего идентификатора кода для клика по документу:

$(document).click(function(event) { 

  if ( $(".children").is(":visible")) {
    $("ul.children").slideUp('slow');
  }

});

Я предполагаю, что document.click, возможно, не работает на сенсорных устройствах, а если нет, то какая работа должна быть направлена на достижение такого же эффекта?

Спасибо

Ответ 1

Чтобы вызвать функцию нажатием или касанием, вы можете изменить это:

$(document).click( function () {

Для этого:

$(document).on('click touchstart', function () {

Или это:

$(document).on('click touch', function () {

Событие touchstart срабатывает, как только элемент затрагивается, событие touch больше похоже на "ответвление", то есть на один контакт на поверхности. Вы действительно должны попробовать каждый из них, чтобы увидеть, что лучше всего подходит для вас. На некоторых устройствах touch может быть немного сложнее вызвать (что может быть хорошим или плохим - оно предотвращает подсчет перетаскивания, но случайное небольшое перетаскивание может привести к его не срабатыванию).

Ответ 2

touchstart или touchhend не очень хороши, потому что если вы прокручиваете страницу, устройство действительно работает. Итак, если я хочу закрыть окно с нажатием или щелчком вне элемента и прокрутить окно, я сделал:

$(document).on('touchstart', function() {
    documentClick = true;
});
$(document).on('touchmove', function() {
    documentClick = false;
});
$(document).on('click touchend', function(event) {
    if (event.type == "click") documentClick = true;
    if (documentClick){
        doStuff();
    }
 });

Ответ 3

можете ли вы использовать jqTouch или jquery mobile? там гораздо легче обрабатывать события касания. Если нет, то вам нужно имитировать щелчок на сенсорном устройстве, следуйте этим статьям:

iphone-touch-events-in-javascript

Демонстрация касания

Подробнее в этом потоке

Ответ 4

Чтобы применить его повсюду, вы можете сделать что-то вроде

$('body').on('click', function() {
   if($('.children').is(':visible')) {
      $('ul.children').slideUp('slow');
   }
});