android - que - sangrado de nariz con coagulos

¿Cómo prevenir el sangrado a través de clics en Android usando Jquery Mobile?

Question

Tengo una página de Jquery Mobile. En mi encabezado, tengo un botón para abrir una capa oculta encima de mi página real. Esta capa también contiene un encabezado con un botón en el mismo lugar. Si muestro la capa y hago clic en el botón, "sangra" hasta el botón que se encuentra debajo de ambos disparos.

No estoy seguro si el HTML es de alguna ayuda:

<div data-role="page" id="base" data-wrapper="true">
   <div data-role="header" data-theme="a">
      // first button 
      <div class="headWrapLeft ui-btn-left">
        <div data-role="controlgroup" > 
           <select data-iconpos="notext" data-icon="home">
              <option value="global">ALL</option>
              <option value="local" selected="selected">SINGLE</option>         
              <option value="menu">Main Menu</option>
            </select>
         </div>
       </div>
       <h1>Header</h1>                  
    </div>
    <div data-role="content">
    // page content  
    </div>


    <div data-role="panel" data-id="setup" data-panel="popover"">

       <div data-role="page" data-show="first" id="main_setup">
      <div data-role="header" data-position="fixed" data-theme="a">
            // back button will be inserted here
            <h1>Setup</h1>
          </div>
          ...
       </div>
    </div>
 </div>// end wrapper page

La primera página es mi página base. El panel de popover es un contenedor de superposición, que se abre como una página HTML de pantalla completa en teléfonos inteligentes. En la tableta todo funciona bien, porque el panel se abre como una ventana emergente Y no hay ningún botón "detrás" del panel en el fondo. Sin embargo, en el teléfono inteligente, el botón de retroceso está sentado justo en la parte superior de la página de fondo y seleccione. Cuando hago clic en el botón Atrás, los incendios selectos.

Pregunta:
Puede encontrar algunas personas que preguntan aquí y allá cómo evitar el sangrado a través de clics en Android. Realmente no he encontrado ninguna solución que funcione.

No estoy seguro de que esto tenga que ver con el borrado de eventos o el índice Z que se ignora, por lo que:

Estoy buscando ideas sobre cómo asegurarme, si hago clic en un botón, este botón y nada más recibe un clic ... ¡Cualquier idea sobre cómo lograr esto es muy apreciada!

¡Gracias por la ayuda!

EDITAR:
Creo que sé lo que está mal: mira este problema en Android:
http://code.google.com/p/android/issues/detail?id=6721

Pensando en cuál es la mejor manera de evitar esto. No puedo configurar la página de fondo para mostrar: ninguna o moverla fuera de la vista, porque las páginas superpuestas están anidadas. Tampoco quiero deshabilitar todos los enlaces de fondo mientras la página de superposición esté visible.

Gracias por algunas ideas más!

Answer 1

De acuerdo. Así es como lo estoy haciendo.

Al mostrar el panel de superposición de popover, estoy llamando a esto:

// Android-Bleeding-Click
// http://code.google.com/p/android/issues/detail?id=6721   
var $popPanel = $(''div:jqmData(id="setup")'');

$(''.ui-page'').not( $popPanel.find(''.ui-page-active'') )
    .find(".ui-header")
    .first()
       .find(".ui-btn, input, select, textarea")
       .addClass(''ui-disabled androidStealsMyTime'')
       .attr(''disabled'',''disabled'')

Al ocultar la superposición, estoy llamando a esto:

$(''.androidStealsMyTime'').removeClass(''ui-disabled androidStealsMyTime'')
                           .removeAttr(''disabled'');

Lo anterior es para elementos mejorados de JQM. Si se tratara de entradas simples, podría alternar la función de deshabilitar en la entrada en sí, pero como JQM agrega algunos elementos como secundarios o secundarios, debe capturar todo lo que hay. No es perfecto ... disabled = disabled en a.link elements es semánticamente cuestionable, supongo, pero luego agin, cabe en una línea y funciona.

Answer 2

Devolver false desde el método de click() debería evitar que burbujee más.

Answer 3

No muestra cómo está vinculando su controlador de eventos, así que tendré que suponer que es vinculante para el evento vclick . Si este es el caso, entonces tendrá que descartar manualmente el segundo evento vclick que se despache.

El evento vclick puede vclick dos veces en algunos dispositivos (es decir, Android 2.1 a 2.3, pero también en otros), y si el contenido del área clicada cambia entre las veces que esos dos eventos se activan, puede obtener dos elementos que activan los controladores de eventos.

Aquí está la solución que uso cuando quiero usar el evento vclick :

//setup flag
var vclick_ok = true;

//delegate the event handling so any element added at any time with the correct class and tagName will trigger this event handler
$(document).delegate(''a.vclick'', ''vclick'', function () {

    //check if it''s OK to run the event handler
    if (vclick_ok) {

        //if it''s OK to run, disable the next time this event handler runs until the setTimeout fires and resets the flag
        vclick_ok = false;
        setTimeout(function () { vclick_ok = true; }, 500);
    }
});

Esto permite que un enlace solo se presione una vez cada medio segundo, lo que debería estar bien para abrir un cuadro de diálogo (ya que el usuario no esperará poder hacer clic rápidamente en el botón).