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>