google chrome - navegar - Chrome "Emular eventos táctiles" no funciona
navegar como movil chrome (5)
He habilitado la opción "Emular eventos táctiles" en las Herramientas para desarrolladores de Chrome. Configuré un programa de prueba simple que alerta cuando toco un <div> . El programa funciona bien en mi Galaxy Nexus, pero cuando hago clic en <div> en Chrome, incluso con la opción "Emular eventos táctiles" activada, no ocurre nada. ¿Alguna sugerencia? ¿Estoy usando esta herramienta correctamente?
Aquí está mi código: nada demasiado elegante.
<!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>
¿Puedes compartir el código que probaste? Aquí hay un código de muestra que funcionó conmigo, tanto en iPhone como en 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>
Los eventos táctiles funcionan en la versión 21 de Chrome (no estoy seguro de las versiones anteriores) PERO debe mantener abierta la ventana Herramientas del desarrollador para que los eventos táctiles ocurran. Si cierra la ventana volverá a los eventos normales del mouse.
Un punto importante que he notado: comprobar "Emular eventos táctiles" no deshabilita los eventos del mouse, solo agrega un toque también.
Lo que me sorprendió fue que, además de tener marcada la casilla de verificación "Emular eventos táctiles", también debes marcar la casilla maestra "Activar" para habilitar las anulaciones. Una vez que ambos fueron revisados, funcionó bien.
