Как связать как Mousedown, так и Touchstart, но не реагировать на оба? Android, JQuery

Работайте на веб-сайте, который также можно просматривать на мобильных устройствах, и вам необходимо связать действие как с сенсорным, так и с mousedown.

Похож на это

$("#roll").bind("mousedown touchstart", function(event){ someAction(); 

Он отлично работает на Iphone, но на Android он реагирует дважды.

 event.stopPropagation(); event.preventDefault(); 

Добавление этого кода исправило его для Android Chrome, но НЕ для браузера Android по умолчанию. Любые другие трюки, которые могут решить проблему для всех Android?

Я использовал эту функцию:

 //touch click helper (function ($) { $.fn.tclick = function (onclick) { this.bind("touchstart", function (e) { onclick.call(this, e); e.stopPropagation(); e.preventDefault(); }); this.bind("click", function (e) { onclick.call(this, e); }); //substitute mousedown event for exact same result as touchstart return this; }; })(jQuery); 

UPDATE: Измененный ответ для поддержки событий мыши и касания.

 element.on('touchstart mousedown', function(e) { e.preventDefault(); someAction(); }); 

preventDefault отменяет событие, согласно спецификациям

Вы получаете touchstart , но как только вы отмените его, вы больше не получаете mousedown . Вопреки тому, что говорит принятый ответ, вам не нужно называть stopPropagation если это не то, что вам нужно. Событие будет распространяться нормально, даже если оно отменено. Браузер будет игнорировать его, но ваши крючки все равно будут работать.

Mozilla соглашается со мной в этом:

Вызов preventDefault () на сенсорный старт или первое событие touchmove серии предотвращает запуск соответствующих событий мыши

EDIT : Я только что снова прочитал вопрос, и вы говорите, что уже сделали это, и он не исправил браузер по умолчанию для Android. Не уверен, как принятый ответ помог, так как он делает то же самое в основном, более сложным образом и с ошибкой распространения событий (touchstart не распространяется, но щелчок делает)

Принимая во внимание комментарии gregers о win8 и chrome / firefox, комментарий skyisred не выглядит таким глупым в конце концов (: P @ все ненавистники), хотя я предпочел бы пойти с черным списком, чем с белым списком, который он предложил, исключая Android из сенсорный привязок:

 var ua = navigator.userAgent.toLowerCase(), isAndroid = ua.indexOf("android") != -1, supportsPointer = !!window.navigator.msPointerEnabled, ev_pointer = function(e) { ... }, // function to handle IE10's pointer events ev_touch = function(e) { ... }, // function to handle touch events ev_mouse = function(e) { ... }; // function to handle mouse events if (supportsPointer) { // IE10 / Pointer Events // reset binds $("yourSelectorHere").on('MSPointerDown MSPointerMove MSPointerUp', ev_pointer); } else { $("yourSelectorHere").on('touchstart touchmove touchend', ev_touch); // touch events if(!isAndroid) { // in androids native browser mouse events are sometimes triggered directly w/oa preceding touchevent (most likely a bug) // bug confirmed in android 4.0.3 and 4.1.2 $("yourSelectorHere").on('mousedown mousemove mouseup mouseleave', ev_mouse); // mouse events } } 

BTW: Я обнаружил, что мыши-события НЕ всегда срабатывают (если были задействованы stopPropagation и preventDefault), в частности, я заметил только лишнюю mousemove непосредственно перед событием touchhend … действительно странная ошибка, но приведенный выше код исправил ее для меня во всех ( Протестированные OSX, Win, iOS 5 + 6, Android 2 + 4 с поддержкой браузера, браузера Chrome, Firefox, IE, Safari и Opera, если есть).

Исправлено использование этого кода

 var mobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent); var start = mobile ? "touchstart" : "mousedown"; $("#roll").bind(start, function(event){ 

Я думаю, что лучший способ:

 var hasTouchStartEvent = 'ontouchstart' in document.createElement( 'div' ); document.addEventListener( hasTouchStartEvent ? 'touchstart' : 'mousedown', function( e ) { console.log( e.touches ? 'TouchEvent' : 'MouseEvent' ); }, false ); 

Я рекомендую вам попробовать jquery-fast-click . Я попробовал другой подход по этому вопросу и другим . Каждый исправленный один вопрос, и представил другой. Быстрый щелчок работал в первый раз на Android, iOS, настольных и настольных сенсорных браузерах (стон).

Напишите этот код и добавьте j query punch touch js.it будет работать, имитируя события мыши с событиями касания

 function touchHandler(event) { var touches = event.changedTouches, first = touches[0], type = ""; switch(event.type) { case "touchstart": type = "mousedown"; break; case "touchmove": type="mousemove"; break; case "touchend": type="mouseup"; break; default: return; } var simulatedEvent = document.createEvent("MouseEvent"); simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY, false, false, false, false, 0/*left*/, null); first.target.dispatchEvent(simulatedEvent); event.preventDefault(); } function init() { document.addEventListener("touchstart", touchHandler, true); document.addEventListener("touchmove", touchHandler, true); document.addEventListener("touchend", touchHandler, true); document.addEventListener("touchcancel", touchHandler, true); }