2

Estoy haciendo una webAPP, y usando el safari (en un iPAD) ocurre que usando el touchpad en BODY, donde no haya ningún otro elemento, el navegador "reacciona", parece que "seleccione" todos los elementos o algo similar. Además, dejando pulsado el touchpad, aparece el menú contextual ( En Android no aparece pero el telefono reacciona vibrando.
Me gustaría evitar estas dos cosas, sin usar librerías ni frameworks.
Aquí os dejo un vídeo donde muestro mi problema: Enlace
Y aquí un código de ejemplo (el que se ve en el vídeo), con las soluciones que he intentado, capturando eventos y con propiedades CSS, pero no parece funcionar.

document.ontouchmove = function(event){event.preventDefault();}
document.onmousedown = function(event){event.preventDefault();}
document.onclick = function(event){event.preventDefault();}
document.ondblclick = function(event){event.preventDefault();}
document.oncontextmenu = function(event){event.preventDefault();}
document.ondrag = function(event){event.preventDefault();}
	
function colorRandom(){
  var color=["red","green","blue","yellow","orange","cyan"];
  IDpantalla.style.backgroundColor=color[Math.floor(Math.random()*color.length)];
}
IDpantalla.ontouchmove=function(){colorRandom();};
IDpantalla.onclick=function(){colorRandom();};
BODY {
	background-color:silver;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-user-drag: none;
}
#IDpantalla {
	position:fixed;
	width:300px;
	height:300px;
	background-color:salmon;
}
<HEAD>
	<META name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0"> 
	<META name="apple-mobile-web-app-capable" content="yes">
	<META name="mobile-web-app-capable" content="yes">
	<META name="apple-mobile-web-app-status-bar-style" content="black">
</HEAD>
<BODY>
  <DIV id="IDpantalla"></DIV>
</BODY>

1 respuesta 1

1

Ver Demo

La solución es de seleccionar html y en javascript window.

CSS

html {      
    background-color:silver;  
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-drag: none;
}

#IDpantalla {
    position:fixed;
    width:300px;
    height:300px;
    background-color:salmon;

}

JS

var IDpantalla = document.getElementById('IDpantalla');

window.ontouchmove = function(event){event.preventDefault();}
window.onmousedown = function(event){event.preventDefault();}
window.onclick = function(event){event.preventDefault();}
window.ondblclick = function(event){event.preventDefault();}
window.oncontextmenu = function(event){event.preventDefault();}
window.ondrag = function(event){event.preventDefault();}

// Para evitar la vibracion al mantener presionado el touchPad
// en  Android, capturar el evento document.ontouchstart
document.ontouchstart = function(event){event.preventDefault();}

function colorRandom(){
  var color=["red","green","blue","yellow","orange","cyan"];
  IDpantalla.style.backgroundColor=color[Math.floor(Math.random()*color.length)];
}
IDpantalla.ontouchmove=function(){colorRandom();};
IDpantalla.onclick=function(){colorRandom();};

Nota aparte: No uses letras mayúscula en los tags

5
  • Estupendo, gracias. En Android sigue vibrando al dejar pulsado, ¿alguna sugerencia? Commented el 14 oct. 2016 a las 10:21
  • Lo siento... pero en Android no te puedo ayudar.. porque no tengo ningún dispositivo para probarlo. Commented el 14 oct. 2016 a las 10:26
  • Muchas gracias igualmente :) Commented el 14 oct. 2016 a las 10:29
  • Y con eso funciona en los dos dispositivos? Si es así.. estas libre de editar la respuesta si deseas... Commented el 14 oct. 2016 a las 13:15
  • Para evitar la vibracion al mantener presionado el touchPad en Android, capturar el evento document.ontouchstart Commented el 14 oct. 2016 a las 14:20

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.