Tengo dos botones con imagenes en su interior que realizan acciones cuando se dejan presionados. Con javascript mando a llamar el evento mousedown para que esto suceda.
Mi problema es que en dispositivos móviles al dejar presionado el botón se abre una ventana que te da las opciones de guardar la imagen del botón y ya no puedes continuar hasta que la cierras. Hay alguna forma de pedirle al explorador que no aparezca esta ventana?
var mousedownID = -1;
var sprite = document.querySelector('.sprite'),
trans = 0;
var bg = document.querySelector('.bg-img'),
property = getTransformProperty(bg);
function getTransformProperty(element) {
var properties = [
'transform',
'WebkitTransform',
'msTransform',
'MozTransform',
'OTransform'
];
var p;
while (p = properties.shift()) {
if (typeof element.style[p] != 'undefined') {
return p;
}
}
return false;
}
function translate() {
bg.style[property] = 'translateX(' + trans + 'px)';
}
function mousedownmove(event) {
movefoward();
if(mousedownID==-1) {
mousedownID = setInterval(movefoward, 100);
}
}
function mouseupmove(event) {
if(mousedownID!=-1) {
stop();
clearInterval(mousedownID);
mousedownID=-1;
}
}
function movefoward() {
trans -= 10;
if(trans > (screen*-1) ) {
translate();
sprite.classList.remove('left');
sprite.classList.add('right');
sprite.classList.add('walk-right');
} else {
console.log("STOP");
removeall();
disablebtn();
sprite.classList.add('fall');
setTimeout(function(){
var newUrl = './tierra.html';
window.location = newUrl;
}, 1000);
}
}
//Assign events FOWARD
var foward = document.getElementById("move");
foward.addEventListener("mousedown", mousedownmove);
foward.addEventListener("touchstart", mousedownmove);
foward.addEventListener("ontouchend", mouseupmove);
foward.addEventListener("mouseup", mouseupmove);
foward.addEventListener("mouseout", mouseupmove);
function removeall() {
sprite.classList.remove('left');
sprite.classList.remove('right');
sprite.classList.remove('walk-left');
sprite.classList.remove('walk-right');
}
function stop() {
sprite.classList.remove('walk-right');
sprite.classList.remove('walk-left');
}
function disablebtn() {
foward.disabled = true;
}
<div class="controls">
<button class="arrow arrow-left" id="moveBack"><img src="../images/left_2.png" alt="Arrow"></button>
<button class="arrow arrow-right" id="move"><img src="../images/right_2.png" alt="Arrow"></button>
</div>