it-swarm.com.de

JavaScript-Mapping-Touch-Events zu Maus-Events

Ich verwende den YUI-Schieberegler, der mit Mausbewegungsereignissen arbeitet. Ich möchte, dass es auf Touchmove-Ereignisse (iPhone und Android) reagiert. Wie kann ich ein Mausbewegungsereignis erzeugen, wenn ein Touchmove-Ereignis auftritt? Ich hoffe, durch das Hinzufügen eines Skripts an der Spitze werden Touchmove-Events den Mausbewegungs-Events zugeordnet und ich muss mit dem Schieberegler nichts ändern. 

50
Questioner

Ich bin mir sicher, dass Sie das wollen:

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

Ich habe die Berührungsereignisse erfasst und dann manuell meine eigenen Mausereignisse abgefeuert, damit sie übereinstimmen. Obwohl der Code nicht besonders allgemein ist, sollte er sich an die meisten vorhandenen Drag & Drop-Bibliotheken und wahrscheinlich an den meisten Mausereigniscode anpassen. Ich hoffe, dass diese Idee für Leute nützlich ist, die Webanwendungen für das iPhone entwickeln.

Update:

Bei der Veröffentlichung dieses Beitrags ist mir aufgefallen, dass der Aufruf von preventDefault bei allen Berührungsereignissen dazu führt, dass Links nicht ordnungsgemäß funktionieren. Der Hauptgrund für den Aufruf von preventDefault ist, dass das Telefon nicht mehr scrollen kann. Sie können dies auch tun, indem Sie es nur für den Callback touchmove aufrufen. Der einzige Nachteil bei dieser Vorgehensweise besteht darin, dass das iPhone manchmal das Hover-Popup über dem gezogenen Origin anzeigt. Wenn ich einen Weg finde, um das zu verhindern, werde ich diesen Beitrag aktualisieren.

Zweites Update:

Ich habe die CSS-Eigenschaft gefunden, um die Legende auszuschalten: -webkit-touch-callout.

101
Mickey Shine

Entsprechend der Antwort von @Mickey Shine bietet Touch Punch die Zuordnung von Touch-Events zu Klick-Events. Es ist dafür gedacht, diese Unterstützung in die jQuery-Benutzeroberfläche zu integrieren, aber der Code ist informativ.

5
Pat

Für zukünftige Benutzer, die hier zurückkehren, kann der folgende Code verwendet werden:

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

Und dann in den Ereignissen wie folgt verwenden:

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

Ich fand schließlich einen Weg, um dies mit Mickeys Lösung zu erreichen, aber nicht mit seiner Init-Funktion. Verwenden Sie hier die init-Funktion.

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

Wenn Sie sehen, dass "filter_div" der Diagrammbereich ist, in dem wir den Filter für den Diagrammbereich haben, und nur in diesem Bereich möchten wir unsere Touch-Steuerelemente neu schreiben!

Vielen Dank, Mickey. Es war eine großartige Lösung.

2
Sana

Damit @ Mickeys Code in Edge und Internet Explorer funktioniert, fügen Sie in .css des Elements, in dem die Simulation ausgeführt werden soll, die folgenden Zeilen hinzu: 

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

Diese Zeilen verhindern die Standardeinstellung für Edge und IE. Wenn Sie es jedoch dem falschen Element hinzufügen, wird auch der Bildlauf deaktiviert (was standardmäßig bei Edge und IE auf Touch-Geräten geschieht).

0
kumardeepakr3