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

Ответ 1

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

//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: Измененный ответ для поддержки событий мыши и касания.

Ответ 2

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

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

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

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

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

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

Ответ 3

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

var ua = navigator.userAgent.toLowerCase(),
isAndroid = ua.indexOf("android") != -1,
supportsPointer = !!window.navigator.msPointerEnabled,
ev_pointer = function(e) { ... }, // function to handle IE10 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/o a 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, если есть).

Ответ 4

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

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

Ответ 5

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

var hasTouchStartEvent = 'ontouchstart' in document.createElement( 'div' );

document.addEventListener( hasTouchStartEvent ? 'touchstart' : 'mousedown', function( e ) {
    console.log( e.touches ? 'TouchEvent' : 'MouseEvent' );
}, false );

Ответ 6

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

Ответ 7

Напишите этот код и добавьте 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);    
}