Evitar que safari “reaccione” al usar el touch en BODY

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;
}

	 
	
	
	


  

2
задан 14.10.2016, 16:10
1 ответ

Видеть Demo

La soluciГіn значит выбирать html и в 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();};

Заметь отдельно: Не используй буквы mayГєscula в tags

1
ответ дан 24.11.2019, 13:06
  • 1
    Необыкновенный, спасибо. В Android продолжи дрожать, оставив нажатый, и #191; какая-то подсказка? – Arnau Castellví 14.10.2016, 13:21
  • 2
    Извините... но в Android я не могу помогать тебе., потому что у меня нет ning и # 250; n устройство, чтобы это тестировать. – Black Sheep 14.10.2016, 13:26
  • 3
    Большое спасибо также:) – Arnau Castellví 14.10.2016, 13:29
  • 4
    И с этим оно функционирует в двух устройствах? Если это эксперт и # 237;. ты свободен издавать ответ, если ты желаешь... – Black Sheep 14.10.2016, 16:15
  • 5
    Чтобы предотвращать колебание, когда touchPad поддерживать нажатый в Android, захватывать событие document.ontouchstart – Arnau Castellví 14.10.2016, 17:20

Теги

Похожие вопросы