Wie Touch-Events in Chrom tragbaren in Windows-Oberfläche laufen zu bekommen?

Question

Das ist, was ich mit den Touch-Ereignisse auslösen:

var eventMap = {}; 

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

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

Dann benutze ich es wie folgt:

$(genderSlider.pointer).on(eventMap.mousedown, setOffset); 
$(genderSlider.pointer).on(eventMap.mousemove, fnMoveSlider); 
$(genderSlider.pointer).on(eventMap.mouseup, function(event){event.preventDefault(); $(event.target).css("-webkit-opacity", "0.5");usingSlider = false}); 

die Callback-Methoden Dann schauen etwas wie folgt aus:

function setOffset(event){ 

alert(event.type); 
event.preventDefault(); 
alert(event.type); 
var touch = ''; 
if (event.type == 'mousedown'){ 
    usingSlider = true; 
    touch = event; 
} else { 
    usingSlider = true; 
    alert(event.type); 
    touch = event.originalEvent.touches[0]; 
} 

var ypos = touch.pageY; // Get Y Coordinate 
$(event.target).css("-webkit-opacity", "1.0"); 
offset = parseFloat(ypos) - parseFloat(this.style.top); 

refObj = {}; 

if(this.id === $(genderSlider.pointer).attr("id")){ 
     refObj = genderSlider; 
    } 
} 

Die Dinge funktionieren gut für Mausereignisse. Bei Berührungsereignissen wird die Warnung jedoch als Mausereignis angezeigt. Versucht touch-action: none als auch. Aber funktioniert nicht

Kann jemand vorschlagen, was soll ich versuchen?

Answer 1

Ich habe es endlich geschafft zu arbeiten. Kann für die zukünftigen Leser nützlich sein.

Die Lösung war tatsächlich viel einfacher als ich es tatsächlich wahrgenommen habe. Macht zwar nicht viel Sinn, aber es funktioniert tatsächlich.

Die Lösung die folgende war:

Schrieb die Methode für die zwei Arten von Veranstaltungen getrennt, so sah es so aus:

$(genderSlider.pointer).on("mousedown", setOffset); 
$(genderSlider.pointer).on("mousemove", fnMoveSlider); 
$(genderSlider.pointer).on("mouseup", function(event) {event.preventDefault(); $(event.target).css("-webkit-opacity", "0.5");usingSlider = false}); 

Und wieder touch:

$(genderSlider.pointer).on("touchstart", setOffsetForTouch); 
$(genderSlider.pointer).on("touchmove", fnMoveSliderForTouch); 
$(genderSlider.pointer).on("touchend", function(event) {event.preventDefault(); $(event.target).css("-webkit-opacity", "0.5");usingSlider = false}); 

schrieb dann die Callback-Ereignisse getrennt, um die Fälle unterschiedlich zu behandeln.