disparar - evento click javascript

Evitar disparar el evento de enfoque al hacer clic en div

Question

Esta pregunta es similar a mi pregunta anterior, haga clic en acción en DIV enfocado , pero esta vez el tema principal es cómo evitar que se desencadene el evento de enfoque cuando hago clic en uno de los divs. La última vez que tuve un div con tabindex = ''- 1'' para hacerlo enfocable al hacer clic, ahora tengo una lista de divs con tabindex> 0 para que puedan ganar el foco al tabular también.

<div tabindex=''1''>Div one</div>
<div tabindex=''1''>Div two</div>
<div tabindex=''1''>Div tree</div>
<div tabindex=''1''>Div four</div>

un poco de estilo:

div {
height: 20px;
width: 60%;
border: solid 1px blue;
text-align: center;
}
div:focus {
border: solid 2px red;
outline: none;
}

Ahora estoy usando una bandera (acción) para disparar una acción (alerta) cuando hago clic en el div por segunda vez, y con un solo clic si ya está enfocado, con TAB por ejemplo.

var action = false;
$(''div'')
.click(function(e){
e.stopImmediatePropagation();
if(action){alert(''action'');}
action = true;})
.focus(function(){action = true;})
.blur(function(){action = false;});

El problema con el código anterior es que el evento de foco se está disparando, lo que significa que stopImmediatePropagation no funciona de la manera que esperaba. La acción de dos clic funciona comentando la línea de evento de foco, pero aún debes hacer doble clic cuando div se centre en TAB . Aquí está el ejemplo: http://jsfiddle.net/3MTQK/1/

Answer 1

Por el momento, la respuesta aparente sería restringir el selector de simplemente ''div'' a un sistema de nombres de clase conmutados, de ese modo podría controlar en qué elemento se desencadenaría su evento de enfoque. Es más tedioso y requiere un poco más de codificación de excepción, pero haría el trabajo.

Answer 2

DEMO aquí

Creo que te faltan algunas partes aquí,

1. event.stopPropagation() se usa para evitar que el evento burbujee. Puedes leer sobre esto aquí .

2. event.stopImmediatePropagation() Además de evitar que se ejecuten controladores adicionales en un elemento, este método también detiene el burbujeo al invocar implícitamente event.stopPropagation() . Puedes leer sobre esto aquí

3. Si desea detener eventos del navegador, entonces debe usar event.preventDefault() . Puedes leer sobre esto aquí

4. click = mousedown + mouseup -> El foco se establecerá en un elemento HTML cuando el mouse hacia abajo sea exitoso. Entonces, en lugar de vincular evento de click , debe usar ''mousedown''. Ver mi demo

5. No puede usar 1 valor booleano de acción para determinar en qué div se hace clic y cuántas veces se ha hecho clic en él. Verifique mi Demo para ver cómo puede manejar eso.

Answer 3

Para evitar simplemente disparar el foco al hacer clic en div solo use mousedown + event.preventDefault() . Use mousedown en lugar de hacer clic porque, como explicó @Selvakumar Arumugam , el foco se dispara cuando el mousedown es exitoso y event.preventDefault () detendrá los eventos del navegador (incluido nuestro enfoque).

Aquí hay un ejemplo de código:

$(''#div'').on(''mousedown'', function(event) {
// do your magic
event.preventDefault();
});