2

Tengo un problema con una aplicación móvil híbrida.

Quisiera cambiar el estilo de un div cuando este sea cliqueado. Actualmente tengo algo como:

<div id="foo">
   Lorem ipsum dolor...
</div>

y aplico en mi documento css:

#foo:active{
    background-color: red;
}

Sin embargo, en mi aplicación móvil, cuando doy toques rápidos (clics rápidos) el estilo no se aplica (solo se aplica en clics largos).

¿Qué puedo hacer para que el estilo cambie al dar clics rápidos?

PD:

También he intentado usar un evento "click" con javascript, agregando y removiendo una clase con estilo diferente, sin embargo, solo funciona en el agregado de la clase y pero cuando esta se remueve no sucede nada.

css:

.bar{
    background-color: red;
}

js:

$$('#foo').click(function(){
    $$(this).addClass('bar');
    setTimeout(function(){ 
        $$(this).removeClass('bar');
    }, 100);


});

Nota: el $$ hace referencia a la libreria de manejo del DOM que incluye Framework7, el cual estoy utilizando

2 respuestas 2

3

que te parece si creas ademas del estilo de aquella clase al hacer click, alguna otra que no tenga ningun estilo o que tenga un estilo por default.

CSS:

.bar{
    background-color: red;
}
.no-bg{
    background-color: transparent;
}

JS:

$$('#foo').click(function(){
    $$(this).removeClass('no-bg');
    $$(this).addClass('bar');
    setTimeout(function(){ 
        $$(this).removeClass('bar');
        $$(this).addClass('no-bg');
    }, 100);
});

Algo asi tal vez.

EDICION

El problema esta en la referencia del $(this) que haces dentro del setTimeout, deberias usar el selector o crear una variable haciendo referencia al elemento, algo asi:

$$('#foo').click(function(){
    $$(this).removeClass('no-bg');
    $$(this).addClass('bar');
    setTimeout(function(){ 
        $$('#foo').removeClass('bar');
        $$('#foo').addClass('no-bg');
    }, 100);
});

O asi:

    $$('#foo').click(function(){
        var foo = $$(this);
        foo.removeClass('no-bg');
        foo.addClass('bar');
        setTimeout(function(){ 
            foo.removeClass('bar');
            foo.addClass('no-bg');
        }, 100);
    });

Aunque en ese caso, creo que no necesitarias tener otra clase, deberia funcionar como tenias anteriormente el codigo:

$$('#foo').click(function(){
    var foo = $$(this);
    foo.addClass('bar');
    setTimeout(function(){ 
        foo.removeClass('bar');
    }, 100);
});
2
  • No funcionó, visualmente solo realiza la acción programada fuera del setTimeout. Es muy extraño. Commented el 20 abr. 2017 a las 21:06
  • He editado mi respuesta dandome cuenta del posible error, pruebala
    – kip
    Commented el 20 abr. 2017 a las 21:16
2

Ten en cuenta que el evento click no responde igual en pantallas táctiles y esto se debe principalmente a que existe un delay al dispararse el evento en este tipo de pantallas. Este delay es de 300ms, es por eso que necesitas mantener al menos 0.3 segundos para que se produzca el evento click.

HTML5 trajo, entre todas sus especificaciones, eventos táctiles como son:

  • touchstart
  • touchend
  • touchmove

Estos eventos son especialmente diseñados para dispositivos móviles/táctiles, de modo que no haya delay al dispararse estos eventos.

Para corregir tu problema debes usar éstos eventos:

let eventName = 'click';

// usar alguna librería o una expresión regular
// para detectar si se está en dispositivo móvil
if (isMobile.any) {
  eventName = 'touchstart';
}

$('#foo').on(eventName, function() {
  $(this).addClass('bar');
  setTimeout(function(){ 
    $(this).removeClass('bar');
  }.bind(this), 100);
});
2
  • Tu respuesta complementa la respuesta anterior, aunque, por lo que estuve leyendo, la referencia $(this) dentro del setTimeout falla debido a que esta hace referencia a window. Commented el 20 abr. 2017 a las 23:19
  • Es correcto. Hay tres opciones: guardar el contexto en una variable (el clásico self, that o _this), hacer un bind al callback del timeout y por último y la mejor de todas, usar una función flecha, ya que ignora los contextos.
    – gugadev
    Commented el 20 abr. 2017 a las 23:22

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.