Chrome "Emulieren" Touch Events" funktioniert nicht

Habe ich aktiviert das "Emulieren" Touch Events" option in Chrome die Entwickler-Tools. Ich habe ein einfaches test-Programm, dass Warnungen, wenn ich berühren <div>. Das Programm funktioniert gut auf meinem Galaxy Nexus, aber wenn ich auf den <div> im Chrome, noch mit dem "Emulieren" Touch-Events" - option aktiviert ist, passiert nichts. Irgendwelche Vorschläge? Bin ich mit diesem Werkzeug richtig?

Hier ist mein code, nichts besonderes.

<!DOCTYPE html>
<html lang="en">
<head>      
    <style type="text/css">
        #main_div
        {
            position: absolute;
            width: 50px;
            height: 20px;
            background-color: red;
            top: 50%;
            left: 20px;             
        }           
    </style>
    <script type="text/javascript">
        function init()
        {
            main_div = document.getElementById("main_div");             
            main_div.ontouchstart = function() 
            {                    
                 alert("here");
            }                               
        }
    </script>
</head>
<body onload="init()">
    <div>
        <p id="x">hello</p>
        <p id="y"></p>
    </div>
    <div id="main_div">
        hello
    </div>
</body>
</html>

Ich bin mit der version 19.0.1084.56.
Haben Sie durch Zufall die Seite zoomed in/out? Event-Koordinaten (sowohl für die Maus und folglich auch der touch sind) in Chrome bekannt sind, werden durch einen Betrag je nach zoom und Seitenlayout. Folglich können Sie nur "fehlt" der Ziel-div vertikal.
Ich habe meine zoom-Stufen - ich bin bei der standard-zoom. Ich habe auch wie Wild geklickt, die alle um mein Ziel, in der Hoffnung, dass Chrome ist nur das Lesen meine Koordinaten falsch, aber leider ohne Erfolg. Danke für die Anregung.
Für einige Grund, DOM0-Ereignisse funktionieren nicht mit der touch emulation. Sie können die DOM2 addEventListener("ontouchstart",...) als workaround. Mittlerweile, crbug.com/133915 gestellt wurde.

InformationsquelleAutor Nathan Friend | 2012-06-14

12

Was ratlos war ich, dass zusätzlich zu den mit dem "Emulieren" touch-events" - Kästchen überprüft haben, haben Sie auch die master - "Aktivieren" - Kontrollkästchen aktiviert aktivieren, überschreibt. Sobald beide wurden überprüft, es funktionierte.
- Das Kontrollkästchen "aktivieren" muss ganz neu ist. Ich habe diese vor und es nicht gesehen.
- Ich denke, es erschien mit Chrom 30.
- Toll. Es funktionierte mit Chrome 30.0.1599.101 auf Windows XP.
- Keine überschreibungen Menü in der neuesten Chrome...
- Ich fand eine aktualisierte Lösung beschrieben in meiner Antwort weiter unten.
InformationsquelleAutor Mike Pollitt
4

Touch-Ereignisse funktionieren in Chrome ab version 21 (nicht sicher über die früheren Versionen), ABER Sie haben zu halten das Developer-Tools-Fenster öffnen, um die für die touch-Ereignisse auftreten. Wenn Sie das Fenster schließen, gehen Sie zurück zur normalen Maus-events.
- Quelle? Hast du diese Erfahrung selbst?
- dies scheint zu funktionieren auf die gleiche Weise für mich
- "Diese Funktion, wie viele andere überschreibt, wird nur funktionieren, während die DevTools sind offen." Quelle: developers.google.com/chrome-developer-tools/docs/...
InformationsquelleAutor Keith
2

Einen wichtigen Punkt, den ich bemerkt habe - Checking "Emulieren" touch events" nicht deaktivieren Maus-events, es fügt nur einen Hauch als gut.
- Kennen Sie eine Möglichkeit zum deaktivieren des Maus-events, während Sie emulieren-touch-events.
- Ich glaube nicht, dass es einen einfachen Weg, es zu tun in Chrom - nur Fang und ausführen einer preventBubble, stopPropagation, stopImmediatePropagation auf der Veranstaltung... auch wenn ich bin nicht positiv, würde alle von Ihnen fangen ersten.
- Dies ist, weil das ist, wie touch-events arbeiten. Fügen Sie zusätzliche Schichten an der Spitze des click-events. Deaktivieren klicken Sie auf Ereignisse, wenn touch aktiviert ist, würde das bedeuten, dass die emulation layer zerbrochen sein im Vergleich zu, wie die Dinge funktionieren würden, die auf tatsächlichen Geräten.
InformationsquelleAutor Ledivin

Kannst du den code probiert?
Hier ist ein Beispielcode, der mit mir gearbeitet hat, sowohl auf dem iPhone und Chrome 19

<head>
 <script>
function listen(elem, evnt, func) {
  if (elem.addEventListener)  //W3C DOM5.        
    elem.addEventListener(evnt,func,false);
  else if (elem.attachEvent) { //IE DOM7.         
    var r = elem.attachEvent("on"+evnt, func);
    return r;
  }
}

function attachListeners() {
var touch_div = document.getElementById('touch_me');
listen(touch_div,'touchmove', function(event) {
    touch_div.innerHTML="being touched " + event.targetTouches.length;
    touch_div.style.background =green;
}, false);
listen(touch_div,'touchstart', function(event) {
    event.preventDefault();
    touch_div.innerHTML="touchstart";
    touch_div.style.background ='green';
}, false);
listen(touch_div,'touchend', function(event) {
    touch_div.innerHTML="thanks!";
    touch_div.style.background ='#CCFF66';
}, false);
listen(touch_div,'click', function(event) {
    touch_div.innerHTML="hey - touch, not click!";
    touch_div.style.background ='red';
}, false);
listen(touch_div,'onmouseup', function(event) {
    touch_div.innerHTML="hey - that was a click!";
    touch_div.style.background ='';
}, false);
 }

function run_onload() {
attachListeners();
}   

 </script>

 </head>
 <body onload="run_onload()">
 <div id="touch_me">Touch me!</div>
 </body>

Danke für den Kommentar, aber selbst in diesem Beispiel, Chrome interpretiert meine Klicks als tatsächliche Maus-Klicks und nicht so berührt.

InformationsquelleAutor Yasei No Umi

1

Das einzige, was für mich funktioniert ist das Umschalten Emulieren-Touch-Ereignisse gefunden, die in der Emulation > Sensoren in Chrom 45 jedes mal, wenn die Seite neu geladen wird. Dies ist eine ziemlich beschissene Lösung. Hoffe jemand findet eine weniger lästige Problem beheben.

InformationsquelleAutor Mark
0

Als der Chrome-69, es gibt keine Overrides Bereich in den Einstellungen, noch einen Emulator Schublade in der Konsole. Stattdessen können Sie auf die ... - Symbol in der Geräte-Ansicht und wählen Sie dann "Add device-Typ".

Während im Responsive-Modus, dies wird Ihnen zeigen, ein wenig dropdown mit den Optionen "Handy", "Handy (kein touch)", "Desktop" und "Desktop (ohne touch)". Wenn Sie es nicht sehen, erweitern Sie die Breite der Geräte-Ansicht. Der Standard für Responsive-Modus ist Mobile (was bedeutet, dass touch-Ereignisse).

Beachten Sie, dass, wenn Sie wählen Sie weitere pre-set-Geräte, der Geräte-Typ wird festgelegt, um Mobil und kann nicht geändert werden. Sie können auch auswählen, welche Geräte-Typ, den Sie möchten, zu emulieren, wenn Sie erstellen ein benutzerdefiniertes Gerät " in den Einstellungen.

InformationsquelleAutor Galen Long

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.