0

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>

1 respuesta 1

0

Quizá te llegue con evitar que el evento se propague con event.preventDefault().

function mousedownmove(event) {
  event.preventDefault();
  movefoward();
  if(mousedownID==-1) {
    mousedownID = setInterval(movefoward, 100);
  }
}

e.PreventDefault() se utiliza para detener una acción por omisión, utilizada comunmente sobre etiquetas (a) o botones input:submit ..

e.stopPropagation() en cambio detiene la propagación de un evento, con el objetivo de q no se realice otra ejecución u otro listener lo escuche a través del DOM.. esto se conoce como bubbling y es algo que quizás no hayan notado antes.. pero al dar click a un elemento, ese evento de click lo pueden escuchar los padres de ese elemento...

Fuente : http://qbit.com.mx/blog/2013/01/07/la-diferencia-entre-return-false-preventdefault-y-stoppropagation-en-jquery/

2
  • No funcionó pero muchas gracias por la ayuda. Commented el 18 feb. 2019 a las 23:38
  • @AnaMaríaGonzález ¿y usando el evento touchstart? a mi me funciona bien. (Fuente: blog.openalfa.com/…) El uso es diferente, fíjate : var e = event.originalEvent; e.preventDefault();
    – Fly
    Commented el 18 feb. 2019 a las 23:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.