Я работаю над мобильным веб-сайтом, который должен работать на разных устройствах. В настоящий момент у меня болит голова, это BlackBerry.

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

В идеале я бы просто использовал:

$thing.click(function(){...})

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

Вместо этого можно использовать Touchstart:

$thing.bind('touchstart', function(event){...})

Но как мне связать оба события, но только одно? Мне все еще нужно событие click для клавиатурных устройств, но, разумеется, я не хочу, чтобы событие click срабатывало, если я использую сенсорное устройство.

Дополнительный вопрос: есть ли возможность сделать это и дополнительно разместить браузеры, у которых даже нет события сенсорного запуска? При исследовании этого, похоже, что BlackBerry OS5 не поддерживает сенсорный запуск, поэтому для этого браузера также необходимо полагаться на события нажатия.

ДОПОЛНЕНИЕ:

Возможно, более полный вопрос:

С jQuery возможно / рекомендуется обрабатывать как прикосновения, так и взаимодействия мыши с одними и теми же привязками?

В идеале ответ - да. Если нет, у меня есть несколько вариантов:

1) Мы используем WURFL для получения информации об устройстве, чтобы создать собственную матрицу устройств. В зависимости от устройства мы будем использовать сенсорный запуск или щелчок.

2) Обнаружение сенсорной поддержки в браузере с помощью JS (мне нужно провести дополнительное исследование по этому вопросу, но кажется, что это выполнимо).

Однако это все еще оставляет одну проблему: как насчет устройств, которые поддерживают ОБА. Некоторые из поддерживаемых нами телефонов (а именно Nokias и BlackBerries) имеют сенсорные экраны и клавиатуры. Так что я снова возвращаюсь к первоначальному вопросу ... есть ли способ как-то учесть оба сразу?

Обновление : ознакомьтесь с проектом Polyfill jQuery Pointer Events, который позволяет вам связывать события «указателя» вместо выбора между мышью и касанием.

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

var flag = false;
$thing.bind('touchstart click', function(){
  if (!flag) {
    flag = true;
    setTimeout(function(){ flag = false; }, 100);
    // do something
  }

  return false
});

Это исправление, которое я «создаю», оно извлекает GhostClick и реализует FastClick. Попробуйте сами и сообщите нам, сработало ли это для вас.

$(document).on('touchstart click', '.myBtn', function(event){
        if(event.handled === false) return
        event.stopPropagation();
        event.preventDefault();
        event.handled = true;

        // Do your magic here

});

Вы можете попробовать что-то вроде этого:

var clickEventType=((document.ontouchstart!==null)?'click':'touchstart');
$("#mylink").bind(clickEventType, myClickHandler);

Обычно это работает также:

$('#buttonId').on('touchstart click', function(e){
    e.stopPropagation(); e.preventDefault();
    //your code here

});

Простое добавление return false;в конце on("click touchstart")функции события может решить эту проблему.

$(this).on("click touchstart", function() {
  // Do things
  return false;
});

Из документации по jQuery .on ()

Возврат falseиз обработчика событий вызовет автоматически event.stopPropagation()и event.preventDefault(). falseЗначение также может быть передано для обработчика в качестве краткого обозначения function(){ return false; }.

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

$thing.on('touchstart click', function(event){
  if (event.type == "touchstart")
    $(this).off('click');

  //your code here
});

В моем случае событие click было привязано к <a>элементу, поэтому мне пришлось удалить привязку click и повторно привязать событие click, что предотвратило действие по умолчанию для <a>элемента.

$thing.on('touchstart click', function(event){
  if (event.type == "touchstart")
    $(this).off('click').on('click', function(e){ e.preventDefault(); });

  //your code here
});

Мне удалось следующим образом.

Очень просто...

$(this).on('touchstart click', function(e){
  e.preventDefault();
  //do your stuff here
});

Я считаю, что наилучшей практикой сейчас является использование:

$('#object').on('touchend mouseup', function () { });

touchend

Событие касания запускается, когда точка касания удаляется с поверхности касания.

Событие touchend не вызовет никаких событий мыши.

---

MouseUp

Событие mouseup отправляется элементу, когда указатель мыши находится над элементом и кнопка мыши отпущена. Любой элемент HTML может получить это событие.

Событие mouseup не вызовет никаких событий касания.

ПРИМЕР

$('#click').on('mouseup', function () { alert('Event detected'); });
$('#touch').on('touchend', function () { alert('Event detected'); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="click">Click me</h1>
<h1 id="touch">Touch me</h1>

РЕДАКТИРОВАТЬ (2017)

С 2017 года браузеры, начиная с Chrome и делающие шаги к тому, чтобы сделать событие щелчка .on("click")более совместимым как для мыши, так и для касания, устраняя задержку, создаваемую событиями касания при запросах на нажатие.

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

Я еще не проводил кросс-браузерное тестирование, чтобы увидеть, насколько это практично.

Как правило, вы не хотите смешивать API по умолчанию для сенсорного и не сенсорного (щелчка). Перейдя в сенсорный мир, вам будет проще работать только с сенсорными функциями. Ниже приведен псевдокод, который будет делать то, что вы хотите.

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

var touchStartTime;
var touchStartLocation;
var touchEndTime;
var touchEndLocation;

$thing.bind('touchstart'), function() {
     var d = new Date();
     touchStartTime = d.getTime();
     touchStartLocation = mouse.location(x,y);
});

$thing.bind('touchend'), function() {
     var d = new Date();
     touchEndTime= d.getTime();
     touchEndLocation= mouse.location(x,y);
     doTouchLogic();
});

function doTouchLogic() {
     var distance = touchEndLocation - touchStartLocation;
     var duration = touchEndTime - touchStartTime;

     if (duration <= 100ms && distance <= 10px) {
          // Person tapped their finger (do click/tap stuff here)
     }
     if (duration > 100ms && distance <= 10px) {
          // Person pressed their finger (not a quick tap)
     }
     if (duration <= 100ms && distance > 10px) {
          // Person flicked their finger
     }
     if (duration > 100ms && distance > 10px) {
          // Person dragged their finger
     }
}

проверяйте быстрые кнопки и простые клики с Google https://developers.google.com/mobile/articles/fast_buttons

Ну ... Все это очень сложно.

Если у вас есть Modernizr, это не просто.

ev = Modernizr.touch ? 'touchstart' : 'click';

$('#menu').on(ev, '[href="#open-menu"]', function(){
  //winning
});

Еще одна реализация для лучшего обслуживания. Тем не менее, этот метод также будет делать event.stopPropagation (). Клик не фиксируется ни на одном другом элементе, который кликал в течение 100 мс.

var clickObject = {
    flag: false,
    isAlreadyClicked: function () {
        var wasClicked = clickObject.flag;
        clickObject.flag = true;
        setTimeout(function () { clickObject.flag = false; }, 100);
        return wasClicked;
    }
};

$("#myButton").bind("click touchstart", function (event) {
   if (!clickObject.isAlreadyClicked()) {
      ...
   }
}

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

Я заменил onфункцию jQuery на модифицированную, которая всякий раз, когда браузер поддерживает сенсорные события, заменяла все мои события клика сенсорным запуском.

$.fn.extend({ _on: (function(){ return $.fn.on; })() });
$.fn.extend({
    on: (function(){
        var isTouchSupported = 'ontouchstart' in window || window.DocumentTouch && document instanceof DocumentTouch;
        return function( types, selector, data, fn, one ) {
            if (typeof types == 'string' && isTouchSupported && !(types.match(/touch/gi))) types = types.replace(/click/gi, 'touchstart');
            return this._on( types, selector, data, fn);
        };
    }()),
});

Использование чем было бы точно так же, как и раньше, например:

$('#my-button').on('click', function(){ /* ... */ });

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

Мне просто пришла в голову идея запоминать, если ontouchstartкогда-либо срабатывал. В этом случае мы находимся на устройстве, которое поддерживает его и хотим игнорировать onclickсобытие. Так как ontouchstartвсегда должен запускаться раньше onclick , я использую это:

<script> touchAvailable = false; </script>
<button ontouchstart="touchAvailable=true; myFunction();" onclick="if(!touchAvailable) myFunction();">Button</button>

Вы можете попробовать вот так:

var clickEvent = (('ontouchstart' in document.documentElement)?'touchstart':'click');
$("#mylink").on(clickEvent, myClickHandler);

В моем случае это работало отлично:

jQuery(document).on('mouseup keydown touchend', function (event) {
var eventType = event.type;
if (eventType == 'touchend') {
    jQuery(this).off('mouseup');
}
});

Основная проблема заключалась в том, что вместо того, чтобы использовать мышку, я попытался щелкнуть, на сенсорных устройствах одновременно сработали щелчок и касание. Если я использую щелчок, некоторые функции на мобильных устройствах вообще не работают. Проблема с щелчком состоит в том, что это глобальное событие, которое запускает остальную часть события, включая touchend.

Это сработало для меня, мобильный телефон слушает оба, так что предотвратите тот, который является сенсорным событием. Рабочий стол только слушать мышь.

 $btnUp.bind('touchstart mousedown',function(e){
     e.preventDefault();

     if (e.type === 'touchstart') {
         return;
     }

     var val = _step( _options.arrowStep );
               _evt('Button', [val, true]);
  });

Будучи для меня лучшим ответом, который дал Мотти, я просто пытаюсь сделать его код более пригодным для повторного использования, так что это мой вклад:

bindBtn ("#loginbutton",loginAction);

function bindBtn(element,action){

var flag = false;
$(element).bind('touchstart click', function(e) {
    e.preventDefault();
    if (!flag) {
        flag = true;
        setTimeout(function() {
            flag = false;
        }, 100);
        // do something
        action();
    }
    return false;
});

Я также работаю над веб-приложением для Android / iPad, и кажется, что для «перемещения компонентов» достаточно использовать только «touchmove» (нет необходимости в touchstart). Отключив сенсорный запуск, вы можете использовать .click (); из jQuery. Это на самом деле работает, потому что он не был перегружен Touchstart.

Наконец, вы можете binb .live ("touchstart", function (e) {e.stopPropagation ();}); чтобы попросить событие touchstart прекратить распространение, нажмите кнопку (), чтобы вызвать событие.

Это сработало для меня.

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

Полное решение см. На странице https://developers.google.com/mobile/articles/fast_buttons.

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

Может быть эффективно назначать событиям 'touchstart mousedown'или 'touchend mouseup'избегать нежелательных побочных эффектов использования click.

Воспользовавшись тем фактом, что щелчок всегда будет следовать за событием касания, вот что я сделал, чтобы избавиться от «призрачного щелчка» без использования таймаутов или глобальных флагов.

$('#buttonId').on('touchstart click', function(event){
    if ($(this).data("already")) {
        $(this).data("already", false);
        return false;
    } else if (event.type == "touchstart") {
        $(this).data("already", true);
    }
    //your code here
});

По сути, всякий раз, когда ontouchstartсобытие срабатывает на элемент, флаг устанавливает и затем впоследствии удаляется (и игнорируется), когда происходит щелчок.

Почему бы не использовать jQuery Event API?

http://learn.jquery.com/events/event-extensions/

Я использовал это простое событие с успехом. Он чистый, пространственный и достаточно гибкий, чтобы его можно было улучшить.

var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
var eventType = isMobile ? "touchstart" : "click";

jQuery.event.special.touchclick = {
  bindType: eventType,
  delegateType: eventType
};

Если вы используете jQuery, для меня это сработало:

var callback; // Initialize this to the function which needs to be called

$(target).on("click touchstart", selector, (function (func){
    var timer = 0;
    return function(e){
        if ($.now() - timer < 500) return false;
        timer = $.now();
        func(e);
    }
})(callback));

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

Может помочь кому-то в подобной ситуации!

Для простых функций, просто распознать касание или нажмите Я использую следующий код:

var element = $("#element");

element.click(function(e)
{
  if(e.target.ontouchstart !== undefined)
  {
    console.log( "touch" );
    return;
  }
  console.log( "no touch" );
});

Это вернет «touch», если определено событие touchstart, и «no touch», если нет. Как я уже сказал, это простой подход для событий щелчка / касания.

Я пытаюсь это, и пока это работает (но я только на Android / PhoneGap, так что будьте бдительны)

  function filterEvent( ob, ev ) {
      if (ev.type == "touchstart") {
          ob.off('click').on('click', function(e){ e.preventDefault(); });
      }
  }
  $('#keypad').on('touchstart click', '.number, .dot', function(event) {
      filterEvent( $('#keypad'), event );
      console.log( event.type );  // debugging only
           ... finish handling touch events...
  }

Мне не нравится тот факт, что я перепривязываю обработчики при каждом касании, но все рассматриваемые прикосновения происходят не очень часто (в компьютерное время!)

У меня есть МНОЖЕСТВО обработчиков, подобных тому, что используется для «#keypad», поэтому, имея такую ​​простую функцию, которая позволяет мне справиться с проблемой без лишнего кода, я пошел по этому пути.

Попробуйте использовать Virtual Mouse (vmouse) Bindingsс jQuery Mobile. Это виртуальное событие специально для вашего случая:

$thing.on('vclick', function(event){ ... });

http://api.jquerymobile.com/vclick/

Список поддержки браузера: http://jquerymobile.com/browser-support/1.4/

РЕДАКТИРОВАТЬ: Мой прежний ответ (на основе ответов в этой теме) не был путь для меня. Я хотел, чтобы подменю расширялось при щелчке мышью при вводе или касании и сворачивалось при отпускании или щелчке мышью. Поскольку события мыши обычно запускаются после событий касания, было довольно сложно написать обработчики событий, которые одновременно поддерживают ввод данных с сенсорного экрана и мыши.

Плагин jQuery: Touch Or Mouse

Я закончил тем, что написал плагин jQuery под названием « Touch Or Mouse » (минимизировано 897 байт), который может определять, было ли событие вызвано сенсорным экраном или мышью (без проверки поддержки сенсорного ввода!). Это позволяет поддержку как сенсорный экран и мышь одновременно и полностью отделить свои события.

Таким образом, OP может использовать touchstartили touchendдля быстрого реагирования на сенсорные нажатия и clickдля кликов, вызываемых только мышью.

демонстрация

Сначала нужно сделать то есть. элементы тела отслеживают события касания:

$(document.body).touchOrMouse('init');

Мышиные события связаны с элементами по умолчанию, и с помощью вызова $body.touchOrMouse('get', e)мы можем узнать, было ли событие вызвано сенсорным экраном или мышью.

$('.link').click(function(e) {
  var touchOrMouse = $(document.body).touchOrMouse('get', e);

  if (touchOrMouse === 'touch') {
    // Handle touch click.
  }
  else if (touchOrMouse === 'mouse') {
    // Handle mouse click.
  }
}

Смотрите плагин на работе на http://jsfiddle.net/lmeurs/uo4069nh .

объяснение

1. Этот плагин должен быть вызван на т.е. элемент body для отслеживания touchstartи touchendсобытий, таким образом, touchendсобытие не должно запускаться по элементу триггера (то есть по ссылке или кнопке). Между этими двумя событиями касания этот плагин считает, что любое событие мыши вызывается касанием.
2. События мыши срабатывают только после того touchend, как , когда событие мыши ghostEventDelayсработало в (опция, 1000 мс по умолчанию) после touchend, этот плагин считает, что событие мыши вызывается прикосновением.
3. При нажатии на элемент с помощью сенсорного экрана элемент получает :activeсостояние. mouseleaveСобытие вызывается только после того , как элемент теряет это состояние , т.е.. нажав на другой элемент. Поскольку это может быть через несколько секунд (или минут!) После того, как mouseenterсобытие было запущено, этот плагин отслеживает последнее mouseenterсобытие элемента : если последнее mouseenterсобытие было вызвано касанием, следующее mouseleaveсобытие также считается вызванным касанием.

Вот простой способ сделать это:

// A very simple fast click implementation
$thing.on('click touchstart', function(e) {
  if (!$(document).data('trigger')) $(document).data('trigger', e.type);
  if (e.type===$(document).data('trigger')) {
    // Do your stuff here
  }
});

Вы в основном сохраняете первый тип события, которое запускается, в свойство 'trigger' в объекте данных jQuery, который присоединен к корневому документу, и выполняете только тогда, когда тип события равен значению в 'trigger'. На сенсорных устройствах цепочка событий, скорее всего, будет «touchstart» с последующим «щелчком»; однако обработчик «щелчка» не будет выполнен, потому что «щелчок» не соответствует исходному типу события, сохраненному в «триггере» («сенсорный запуск»).

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

Вот кодекс, с которым вы можете поиграть (попробуйте нажать на кнопку на сенсорном устройстве - не должно быть задержки нажатия): http://codepen.io/thdoan/pen/xVVrOZ

Я также реализовал это как простой плагин jQuery, который также поддерживает фильтрацию потомков jQuery путем передачи строки селектора:

// A very simple fast click plugin
// Syntax: .fastClick([selector,] handler)
$.fn.fastClick = function(arg1, arg2) {
  var selector, handler;
  switch (typeof arg1) {
    case 'function':
      selector = null;
      handler = arg1;
      break;
    case 'string':
      selector = arg1;
      if (typeof arg2==='function') handler = arg2;
      else return;
      break;
    default:
      return;
  }
  this.on('click touchstart', selector, function(e) {
    if (!$(document).data('trigger')) $(document).data('trigger', e.type);
    if (e.type===$(document).data('trigger')) handler.apply(this, arguments);
  });
};

Codepen: http://codepen.io/thdoan/pen/GZrBdo/

Лучший метод, который я нашел, это написать событие касания и заставить это событие вызывать событие обычного щелчка программно. Таким образом, у вас есть все ваши обычные события нажатия, а затем вам нужно добавить только один обработчик событий для всех событий касания. Для каждого узла, который вы хотите сделать сенсорным, просто добавьте в него класс «сенсорный», чтобы вызвать сенсорный обработчик. С Jquery это работает так с некоторой логикой, чтобы удостовериться, что это настоящее событие касания, а не ложное срабатывание.

$("body").on("touchstart", ".touchable", function() { //make touchable  items fire like a click event
var d1 = new Date();
var n1 = d1.getTime();
setTimeout(function() {
    $(".touchable").on("touchend", function(event) {
        var d2 = new Date();
        var n2 = d2.getTime();
        if (n2 - n1 <= 300) {
            $(event.target).trigger("click"); //dont do the action here just call real click handler
        }
    });
}, 50)}).on("click", "#myelement", function() {
//all the behavior i originally wanted
});