evento tap activado después de Taphold jQuery Mobile 1.1.1

Question

Estoy desarrollando una aplicación para iOS usando Phonegap incluido con jQuery Mobile 1.1.1. Tengo un div en mi página que está escuchando eventos tanto de tap como taphold.

El problema que estoy enfrentando es que el evento tap se activa después del evento Taphold una vez que levante mi dedo. ¿Cómo evito esto? Se proporciona una solución here, pero ¿es esta la única forma de hacerlo? Un poco anula todo el punto de tener dos eventos diferentes para taphold & si necesita usar un indicador booleano para diferenciar los dos.

que sigue es mi código:

$('#pageOne').live('pageshow', function(event) { 
    $('#divOne').bind('taphold', function (event) { 
     console.log("TAP HOLD!!");  
    }); 

    $('#divOne').bind('tap', function() { 
     console.log("TAPPED!!"); 
    }); 
}); 

agradecería mucho la ayuda. ¡Gracias!

Answer 1

[probado y comprobado] comprobado que la aplicación de jQuery Mobile. Están disparando el evento 'tap' después de 'taphold' cada vez en 'vmouseup'.

Solución alternativa sería para no desencadenar el evento 'tap' si el 'taphold' se ha disparado. Crear un evento personalizado o modificar la fuente de acuerdo con lo que necesita de la siguiente manera:

$.event.special.tap = { 
    tapholdThreshold: 750, 

    setup: function() { 
     var thisObject = this, 
      $this = $(thisObject); 

     $this.bind("vmousedown", function(event) { 

      if (event.which && event.which !== 1) { 
       return false; 
      } 

      var origTarget = event.target, 
       origEvent = event.originalEvent, 
       /****************Modified Here**************************/ 
       tapfired = false, 
       timer; 

      function clearTapTimer() { 
       clearTimeout(timer); 
      } 

      function clearTapHandlers() { 
       clearTapTimer(); 

       $this.unbind("vclick", clickHandler) 
        .unbind("vmouseup", clearTapTimer); 
       $(document).unbind("vmousecancel", clearTapHandlers); 
      } 

      function clickHandler(event) { 
       clearTapHandlers(); 

       // ONLY trigger a 'tap' event if the start target is 
       // the same as the stop target. 
       /****************Modified Here**************************/ 
       //if (origTarget === event.target) { 
       if (origTarget === event.target && !tapfired) { 
        triggerCustomEvent(thisObject, "tap", event); 
       } 
      } 

      $this.bind("vmouseup", clearTapTimer) 
       .bind("vclick", clickHandler); 
      $(document).bind("vmousecancel", clearTapHandlers); 

      timer = setTimeout(function() { 
       tapfired = true;/****************Modified Here**************************/ 
       triggerCustomEvent(thisObject, "taphold", $.Event("taphold", { target: origTarget })); 
      }, $.event.special.tap.tapholdThreshold); 
     }); 
    } 
}; 

Answer 2

Puede usar el método de jquery stopImmediatePropagation() para resolver este problema. De acuerdo con el método

explicación en jquery api, stopImmediatePropagation() "Mantiene el resto de los manipuladores de ser ejecutado y evita que el evento de burbujeando el árbol DOM."

Answer 3

poner esto en el controlador de eventos taphold ... asume esta sugerencia o es un objeto jQuery que disparó el taphold

jQuery (o) .one ('tap click', function() {return false;});

el enlace al método único activará el evento solo una vez. si devuelve false se detendrá la ejecución de ese evento si fuera una etiqueta < a>.

Answer 4

Basta con establecer esta en la parte superior del documento o en cualquier lugar antes de definir su aun:

$.event.special.tap.emitTapOnTaphold = false; 

A continuación, se puede utilizar de esta manera:

$('#button').on('tap',function(){ 
    console.log('tap!'); 
}).on('taphold',function(){ 
    console.log('taphold!'); 
}); 

Answer 5

Desde golpe, provoca taphold entonces fue capaz de mantener la sencillez con:

$(c).bind("taphold",function(e){ 
     if(e.target.wait){ 
      e.target.wait = false; 
     }else{ 
      alert("fire the taphold"); 
     }//eo if not waiting 
    }); 
    $(c).bind("swipe",function(e){ 
      e.target.wait = true;//taphold will come next if I don't wave it off 
     alert(e.target.text+"("+e.target.attributes.dataId.value+") got swiped"); 
     return false; 
    }); 

apoyar grifo demasiado entonces me remito la espera hasta que la clara toque evento que también siempre se disparará.

Answer 6

$ .event.special.tap = { tapholdThreshold: 750,

setup: function() { 
    var thisObject = this, 
     $this = $(thisObject); 

    $this.bind("vmousedown", function(event) { 

     if (event.which && event.which !== 1) { 
      return false; 
     } 

     var origTarget = event.target, 
      origEvent = event.originalEvent, 
      /****************Modified Here**************************/ 
      tapfired = false, 
      timer; 

     function clearTapTimer() { 
      clearTimeout(timer); 
     } 

     function clearTapHandlers() { 
      clearTapTimer(); 

      $this.unbind("vclick", clickHandler) 
       .unbind("vmouseup", clearTapTimer); 
      $(document).unbind("vmousecancel", clearTapHandlers); 
     } 

     function clickHandler(event) { 
      clearTapHandlers(); 

      // ONLY trigger a 'tap' event if the start target is 
      // the same as the stop target. 
      /****************Modified Here**************************/ 
      //if (origTarget === event.target) { 
      if (origTarget === event.target && !tapfired) { 
       triggerCustomEvent(thisObject, "tap", event); 
      } 
     } 

     $this.bind("vmouseup", clearTapTimer) 
      .bind("vclick", clickHandler); 
     $(document).bind("vmousecancel", clearTapHandlers); 

     timer = setTimeout(function() { 
      tapfired = true;/****************Modified Here**************************/ 
      triggerCustomEvent(thisObject, "taphold", $.Event("taphold", { target: origTarget })); 
     }, $.event.special.tap.tapholdThreshold); 
    }); 
} 

};

@ Akash Budhia: Gracias por sus soluciones. ¡Es genial, suena que funciona para mí!

Answer 7

Todavía tengo problemas, con el taphold de jquery-mobile, resolví el problema del clic que se llama después de taphold, poniendo un tiempo de espera en el elemento. JQM 1.4 con emitTapOnTaphold = false;

Ejemplo:

$(".element").on("taphold", function() { 
        // function her 

         setTimeout (function() { 
             $(this).blur(); 
         400); 
});