Prevent safari from "reacting" by using touch in BODY

Question

Prevent safari from "reacting" by using touch in BODY

Navigation

#1 by (1 votes)

2

I'm doing a webAPP, and using the safari (on an iPAD) it happens that using the touchpad in BODY, where there is no other element, the browser "reacts", it seems that "select" all the elements or something similar. In addition, by pressing the touchpad, the contextual menu appears (Android does not appear but the phone reacts 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 an example code (the one seen in the video), with the solutions I've tried, capturing events and with CSS properties, but it does not 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 html5 css3 ios

asked by Arnau Castellví 14.10.2016 в 04:21

source

1 answer

Create LightBox in php Search data API Twitter

score 1 · Accepted Answer

View Demo

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

Separate note: Do not use uppercase letters in the tags