JavaScript отображает сенсорные события на события мыши - PullRequest
Новая
       36

JavaScript отображает сенсорные события на события мыши

52 голосов
/ 05 октября 2009

Я использую ползунок YUI, который работает с событиями перемещения мыши. Я хочу, чтобы он реагировал на события сенсорного перемещения (iPhone и Android). Как создать событие перемещения мыши при возникновении события касания? Я надеюсь, что, просто добавив скрипт вверху, события touchmove будут сопоставлены с событиями перемещения мыши, и мне не нужно будет ничего менять с помощью ползунка.

Ответы [ 5 ]

104 голосов
/ 23 ноября 2009

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

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.

Обновление:

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

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

Я нашел свойство CSS для отключения выноски: -webkit-touch-callout.

5 голосов
/ 13 декабря 2012

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

3 голосов
/ 21 марта 2016

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

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
}
2 голосов
/ 26 сентября 2014

Я наконец нашел способ заставить это работать, используя решение Микки, но вместо его функции инициализации. Используйте здесь функцию 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» - это область диаграммы, где у нас есть фильтр диапазона диаграммы, и только в этой области мы хотим переписать наши сенсорные элементы управления!

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

1 голос
/ 01 ноября 2016

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

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

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

...