Home / Questions / 27743
Accepted
Arnau Castellví
Asked: 2020-10-14 18:21:24 +0800 CST 2020-10-14 18:21:24 +0800 CST

Prevent safari from "reacting" when using touch on BODY

  • 772

I am making a webAPP, and using safari (on an iPAD) it happens that using the touchpad on BODY, where there are no other elements, the browser "reacts", it seems to "select" all the elements or something similar. In addition, by holding down the touchpad, the contextual menu appears (In Android it does not appear but the phone reacts by vibrating.
I would like to avoid these two things, without using libraries or frameworks.
Here is a video where I show my problem: Link
And here is a code example (the one seen in the video), with the solutions I've tried, capturing events and with CSS properties, but it doesn't seem to work.

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>

javascript

1 Answers

  1. Best Answer

    View Demo

    The solution is to select htmly in 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();};

    Side note: Do not use capital letters in tags

    • 1