Chrome "Emulate Touch Events" non funzionante

Ho attivato l'opzione "Emula tocco eventi" in Strumenti per sviluppatori di Chrome. Ho creato un semplice programma di test che avvisa quando tocco un <div>. Il programma funziona correttamente sul mio Galaxy Nexus, ma quando clicco su in Chrome, anche con l'opzione "Emulate Touch Events" attivata, non succede nulla. Eventuali suggerimenti? Sto usando questo strumento correttamente?Chrome "Emulate Touch Events" non funzionante

Ecco il mio codice: niente di eccessivo.

<!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>

fonte

2012-06-14 Nathan Friend

Sto correndo la versione 19.0.1084.56. –

Ti è capitato per caso di ingrandire/ridurre la pagina? Le coordinate degli eventi (sia per il mouse che, di conseguenza, per quelle tattili) in Chrome sono note per essere di una quantità diversa a seconda dello zoom e del layout della pagina. Di conseguenza, potresti semplicemente "mancare" il div target verticalmente. –

Ho controllato i miei livelli di zoom - Sono allo zoom standard. Ho anche fatto furiosamente clic su tutto il mio bersaglio nella speranza che Chrome stia leggendo le mie coordinate in modo errato, ma purtroppo, senza successo. Grazie per il suggerimento. –

Ciò che mi ha impedito è che oltre ad avere la casella di controllo "Emula touch events" selezionata, devi anche avere la casella "Abilita" principale abilitata per abilitare le sostituzioni. Una volta che entrambi sono stati controllati, ha funzionato correttamente.

enter image description here

fonte

2013-10-02 05:11:13

Questa casella di controllo deve essere abbastanza nuova. L'ho usato prima e non l'ho visto. – aslakjo

Penso che sia apparso con Chrome 30. – Prinzhorn

Grande. Ha funzionato con Chrome 30.0.1599.101 su Windows XP. –

Puoi condividere il codice che hai provato? Ecco un esempio di codice che ha lavorato con me, sia su iPhone e 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>

fonte

2012-06-19 12:56:56

Grazie per il commento, ma anche in questo esempio, Chrome interpreta i miei clic come clic effettivi del mouse e non come tocchi. –

eventi touch lavorare in Chrome versione 21 (non sono sicuro circa le versioni precedenti), ma si deve tenere la finestra Developer Tools aperta in modo che gli eventi tattili che si verificano Se chiudi la finestra tornerai agli eventi normali del mouse.

fonte

2012-08-22 13:17:42 Keith

Sorgente? L'hai vissuto tu stesso? – nalply

sembra funzionare allo stesso modo per me –

"Questa funzione, come molte altre sostituzioni, funzionerà solo mentre DevTools è aperto." Fonte: https://developers.google.com/chrome-developer-tools/docs/mobile-emulation#emulate-touch-events –

Un punto importante che ho notato: il controllo "Emula eventi di tocco" non disabilita gli eventi del mouse, aggiunge solo un tocco.

fonte

2012-09-18 13:49:08 Ledivin

Sei a conoscenza di un modo per disattivare gli eventi del mouse durante l'emulazione degli eventi di tocco. – TankorSmash

Non penso che ci sia un modo semplice per farlo in Chrome - solo prenderli e lanciare un Bubble, fermarePropagazione, fermareImmediatePropagation sull'evento ... anche se anche io non sono sicuro li prenderei tutti prima. – Ledivin

Questo perché funzionano gli eventi touch. Aggiungono strati extra in cima agli eventi dei clic. Disabilitare gli eventi click quando il tocco è abilitato significherebbe che il livello di emulazione sarebbe rotto rispetto a come funzionerebbero le cose sui dispositivi reali. – Garbee

L'unica cosa che sta lavorando per me è quello di alternare Emulare tocco Eventi trovati in Emulazione> Sensori in Chrome 45 ogni volta che la pagina viene ricaricata. Questa è una soluzione piuttosto schifosa. Spero che qualcuno trovi una soluzione meno fastidiosa.

fonte

2015-09-04 19:28:49 mark

Chrome "Emulate Touch Events" non funzionante

risposta

Problemi correlati