Отображение событий касания JavaScript для событий мыши

Ответ 1

Я уверен, что это то, что вы хотите:

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

    // initMouseEvent(type, canBubble, cancelable, view, clickCount, 
    //                screenX, screenY, clientX, clientY, ctrlKey, 
    //                altKey, shiftKey, metaKey, button, relatedTarget);

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

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

Update:

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

Второе обновление:

Я нашел свойство CSS, чтобы отключить выноску: -webkit-touch-callout.

Ответ 2

В ответ на ответ @Mickey Shine Touch Punch обеспечивает отображение событий касания, чтобы щелкнуть события. Он был построен, чтобы включить эту поддержку в пользовательский интерфейс jQuery, но код является информативным.

Ответ 3

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

var eventMap = {};

(function(){
var eventReplacement = {
    "mousedown": ["touchstart mousedown", "mousedown"],
    "mouseup": ["touchend mouseup", "mouseup"],
    "click": ["touchstart click", "click"],
    "mousemove": ["touchmove mousemove", "mousemove"]
};


for (i in eventReplacement) {
    if (typeof window["on" + eventReplacement[i][0]] == "object") {
        eventMap[i] = eventReplacement[i][0];
    } 
    else {
        eventMap[i] = eventReplacement[i][1];
    };
 };
})();

И затем в событиях используйте, например, следующее:

$(".yourDiv").on(eventMap.mouseup, function(event) {
      //your code
}

Ответ 4

Наконец-то я нашел способ получить это, используя решение Микки, но вместо его функции init. Используйте здесь функцию init.

function init() {
    document.getElementById('filter_div').addEventListener("touchstart", touchHandler, true);
    document.getElementById('filter_div').addEventListener("touchmove", touchHandler, true);
    document.getElementById('filter_div').addEventListener("touchend", touchHandler, true);
    document.getElementById('filter_div').addEventListener("touchcancel", touchHandler, true);
}

Если вы видите, что "filter_div" - это область диаграммы, в которой у нас есть фильтр диапазона диаграмм, и только в этой области мы хотим переписать наши элементы управления касанием!

Спасибо, Микки. Это было отличное решение.

Ответ 5

Чтобы сделать работу с кодом @Mickey в Edge и Internet explorer, добавьте следующие строки в .css элемента, в котором вы хотите, чтобы симуляция произошла:

.areaWhereSimulationHappens {
    overflow: hidden;
    touch-action: none;
    -ms-touch-action: none;
}

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