Я працюю на мобільному веб-сайті, який має працювати на різних пристроях. На даний момент у мене болить голова - це BlackBerry.

Нам потрібно підтримувати як натискання клавіатури, так і сенсорні події.

В ідеалі я б просто використовував:

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

але проблема, з якою ми стикаємося, полягає в тому, що деякі з цих пристроїв ожини мають дуже дратівливу затримку з моменту дотику до неї, що викликає клацання.

Засіб полягає в тому, щоб замість цього використовувати сенсорний запуск:

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

Але як я можу прив’язати обидві події, а лише розпалити одну? Мені все ще потрібна подія клацання для клавіатурних пристроїв, але, звичайно, не хочу запускати події клацання, якщо я використовую сенсорний пристрій.

Бонусне запитання: чи все-таки це робити і додатково розміщувати браузери, які навіть не мають сенсорного початку? Досліджуючи це, схоже, що BlackBerry OS5 не підтримує сенсорний запуск, тому також доведеться покладатися на події клацання для цього браузера.

ДОДАТИ:

Можливо, більш вичерпне питання:

Чи можна за допомогою jQuery обробляти як сенсорні, так і взаємодії миші з однаковими прив'язками?

В ідеалі відповідь - так. Якщо ні, у мене є кілька варіантів:

1) Ми використовуємо WURFL для отримання інформації про пристрій, щоб створити власну матрицю пристроїв. Залежно від пристрою, ми будемо використовувати сенсорний АБО клацання.

2) Визначте підтримку дотику в браузері через JS (мені потрібно ще кілька досліджень щодо цього, але здається, що це можливо).

Однак це все ще залишає одне питання: як щодо пристроїв, які підтримують BOTH. Деякі телефони, які ми підтримуємо (а саме Nokias та BlackBerries), мають як сенсорні екрани, так і клавіатури. Тож такий спосіб повертає мене до повного кола до початкового питання ... чи є спосіб якось дозволити обом відразу?

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

Прив’яжіть до обох, але зробіть прапор, щоб функція запускалася лише один раз на 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
});

У моєму випадку подія клацання була прив’язана до <a>елемента, тому мені довелося видалити прив'язку клацання та повторно пов’язати подію натискання, що перешкоджало дії за замовчуванням для <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 не спричинить жодних подій миші.

---

миша

Подія миші надсилається елементу, коли вказівник миші над елементом, і кнопка миші відпускається. Будь-який елемент HTML може отримати цю подію.

Подія миші не спричинить жодних сенсорних подій.

ПРИКЛАД

$('#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>

EDIT (2017)

Станом на 2017 рік, браузери починають із Chrome і роблять кроки до здійснення події кліку .on("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

Ну ... Все це дуже складно.

Якщо у вас є модернізатор, це не маніпулятор.

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');
}
});

Основна проблема полягала в тому, що замість миші я намагався натиснути, на сенсорних пристроях викликали натискання та торкання одночасно, якщо я використовую клавішу, деяка функціональність взагалі не працює на мобільних пристроях. Проблема з клацанням полягає в тому, що це глобальна подія, яка запускає решту події, включаючи дотик.

Це працювало для мене, мобільний слухає і те, і інше, тому запобігайте тому, що є сенсорною подією. на робочому столі слухати тільки мишу.

 $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" для "переміщення компонентів" (не потрібно сенсорного запуску). Відключивши сенсорний запуск, ви можете використовувати .click (); від jQuery. Це насправді працює, тому що його не перевантажено сенсорним стартом.

Нарешті, ви можете binb .live ("touchstart", функція (e) {e.stopPropagation ();}); попросити подію сенсорного запуску припинити поширювати, вітальня натиснути (), щоб спрацьовувати.

Це працювало для мене.

Є багато речей, які слід враховувати, намагаючись вирішити це питання. Більшість рішень або порушують прокрутку, або не обробляють належним чином події клацання.

Повне рішення див веб-сторінці https://developers.google.com/mobile/articles/fast_buttons

Примітка: Ви не можете обробляти події клацання привидів на основі елемента. Затримка натискання запускається за місцем екрана, тому якщо ваші сенсорні події модифікують сторінку певним чином, подія натискання буде надіслана до нової версії сторінки.

Це може бути ефективно призначати події '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подія запускає елемент, позначає набір і потім згодом видаляється (і ігнорується) при натисканні клацання.

Чому б не використовувати API jQuery Event?

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...
  }

Мені не подобається те, що я повторно зв'язую оброблювачів на кожному дотику, але всі речі, які вважаються дотиками, трапляються не дуже часто (у комп’ютерний час!)

У мене є TON обробників, таких як "#keypad", тому маючи просту функцію, яка дозволяє мені вирішувати проблему без зайвого коду, тому я пішов цим шляхом.

Спробуйте використовувати Virtual Mouse (vmouse) Bindingsвід jQuery Mobile. Це віртуальна подія, особливо для вашого випадку:

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

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

Список підтримки веб-переглядача: http://jquerymobile.com/browser-support/1.4/

EDIT: Моя колишня відповідь (заснована на відповідях у цій темі) не була для мене дорогою. Я хотів, щоб підменю розгорнулося при введенні миші або натисканні миші та згорнулось у відпустці миші або іншому натисканні клацання. Оскільки події миші зазвичай знімаються після сенсорних подій, писати слухачів подій, які підтримують і сенсорний екран, і введення миші, було дуже складно.

плагін jQuery: торкніться або миші

Я закінчив писати плагін jQuery під назвою " Touch Or Mouse " (897 байт мінімізований), який може визначити, чи викликала подію сенсорний екран або миша (без тестування на підтримку сенсорного режиму!). Це дозволяє підтримку як сенсорний екран і миша одночасно і повністю відокремити свої події.

Таким чином ОП може використовувати 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. Цей плагін потрібно викликати, тобто. елемент тіла для відстеження 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
  }
});

Ви в основному зберігаєте перший тип події, який викликається властивістю "тригер" в об'єкті даних jQuery, який прикріплений до кореневого документа, і виконується лише тоді, коли тип події дорівнює значенню в "тригері". На пристроях, що торкаються, ланцюжок подій, ймовірно, буде "сенсорним", а потім "клацанням"; однак обробник "натискання" не буде виконаний, оскільки "натискання" не відповідає початковому типу події, збереженому в "тригері" ("сенсорний запуск").

Припущення, і я вважаю, що це безпечно, полягає в тому, що ваш смартфон не буде мимовільно змінюватися з сенсорного пристрою на пристрій миші, інакше дотик ніколи не зареєструється, оскільки тип події "тригер" зберігається лише один раз на завантаження сторінки та "натискання" ніколи не збігаються з "сенсорним".

Ось коден, з яким можна пограти (спробуйте натиснути кнопку на сенсорному пристрої - не повинно бути затримок натискання): 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
});