javascript - domcontentloaded - js loaded event

Chrome(¿quizás Safari?) Dispara "desenfoque" dos veces en los campos de entrada cuando el navegador pierde el foco

Question

Aquí hay un jsfiddle interesante.

En Firefox:

1. Corre el violín
2. Haga clic en la entrada de texto
3. Haga clic en otro lugar. Debería decir "1 desenfoque".
4. Haga clic en la entrada de texto de nuevo.
5. ALT-TAB a otra ventana. El violín ahora debería decir "2 borrones".

En Chrome, en el paso 5, dice "3 desenfoques". Se activan dos eventos de "desenfoque" separados cuando todo el navegador pierde el foco. Esto es de interés porque significa que no es seguro suponer, en un controlador de "desenfoque", que el elemento realmente tenía el foco justo antes de que se enviara el evento; es decir, que la pérdida del enfoque, la transición de "estar enfocado" a "no estar enfocado", es la razón del evento. Cuando se generan dos eventos de "desenfoque", esa condición no se cumple durante el manejo del segundo evento, ya que el elemento ya no está enfocado.

¿Entonces esto es solo un error? ¿Hay alguna manera de decir que un evento "borroso" es falso?

Answer 1

Esto se confirma error de Chrome. Ver el rastreador de problemas de cromo

La solución está en la respuesta aceptada.

Answer 2

Estoy en la versión 30.0.1599.101 m de Chrome en Windows 7 y este problema parece haberse solucionado.

Answer 3

Estoy experimentando lo mismo y las publicaciones anteriores tienen sentido en cuanto a por qué. En mi caso, solo quería saber si al menos un evento de desenfoque había ocurrido. Como resultado, encontré que el solo hecho de regresar de mi función de desenfoque resolvió mi problema e impidió que se disparara el evento posterior.

   function handleEditGroup(id) {
        var groupLabelObject = $(''#'' + id);
        var originalText = groupLabelObject.text();

        groupLabelObject.attr(''contenteditable'', true)
            .focus().blur(function () {
                $(this).removeAttr(''contenteditable'');
                $(this).text($(this).text().substr(0, 60));

                if ($(this).text() != originalText) {
                    alert("Change Found");
                    return; //<--- Added this Return.
                }
            });
    }

Answer 4

La razón por la que se dispara dos veces es debido a window.onblur. El desenfoque de la ventana desencadena un evento de desenfoque en todos los elementos de esa ventana como parte del proceso de captura / propagación de javascript. Todo lo que necesitas hacer es probar el objetivo del evento para ser la ventana.

var blurCount = 0;
var isTargetWindow = false;
$(window).blur(function(e){
    console.log(e.target);
    isTargetWindow = true;
});
$(window).focus(function(){
    isTargetWindow = false;
});
$(''input'').blur(function(e) {
    if(!isTargetWindow){         
       $(''div'').text(++blurCount + '' blurs'');
    }
    console.log(e.target);
});

http://jsfiddle.net/pDYsM/4/

Answer 5

Parece que una rareza de angularjs da una solución más simple cuando se usa ng-blur; El objeto $ evento solo se define si lo pasas en:

ng-blur="onBlur($event)"

así que (si no está usando ng-blur en la ventana) puede verificar:

$scope.onBlur = function( $event ) {
    if (event != undefined) {
       //this is the blur on the element
    }
}

Answer 6

Probablemente esto no sea lo que quieres escuchar, pero la única forma de hacerlo parece ser rastrear manualmente si el elemento está enfocado o no. Por ejemplo ( violín aquí ):

var blurCount = 0;
document.getElementsByTagName(''input'')[0].onblur = function(e) {
    if (!e) e = window.event;
    console.log(''blur'', e);
    if (!(e.target || e.srcElement)[''data-focused'']) return;
    (e.target || e.srcElement)[''data-focused''] = false;
    document.getElementsByTagName(''div'')[0].innerHTML = (++blurCount + '' blurs'');
};
document.getElementsByTagName(''input'')[0].onfocus = function(e) {
    if (!e) e = window.event;
    console.log(''focus'', e);
    (e.target || e.srcElement)[''data-focused''] = true;
};

Curiosamente, no pude hacer que esto funcionara en jQuery ( violín aquí ) ... Realmente no uso mucho jQuery, ¿tal vez estoy haciendo algo mal aquí?

var blurCount = 0;
$(''input'').blur(function(e) {
    console.log(''blur'', e);
    if (!(e.target || e.srcElement)[''data-focused'']) return;
    (e.target || e.srcElement)[''data-focused''] = false;
    $(''div'').innerHTML = (++blurCount + '' blurs'');
});
$(''input'').focus(function(e) {
    console.log(''focus'', e);
    (e.target || e.srcElement)[''data-focused''] = true;
});

También puedes intentar comparar el destino del evento con document.activeElement . Este ejemplo ignorará los eventos de desenfoque alt + tab, y los eventos de desenfoque resultantes de hacer clic en Chrome ... Chrome. Esto podría ser útil dependiendo de la situación. Si el usuario alt + vuelve a las pestañas en Chrome, es como si la caja nunca perdiera el enfoque ( fiddle ).

var blurCount = 0;
document.getElementsByTagName(''input'')[0].onblur = function(e) {
    if (!e) e = window.event;
    console.log(''blur'', e, document.activeElement, (e.target || e.srcElement));
    if ((e.target || e.srcElement) == document.activeElement) return;
    document.getElementsByTagName(''div'')[0].innerHTML = (++blurCount + '' blurs'');
};​
​

Answer 7

Saltar 2º desenfoque:

var secondBlur = false;
this.onblur = function(){
    if(secondBlur)return;
    secondBlur = true;
    //do whatever
}
this.onfocus = function(){
    secondBlur = false;    
    //do whatever
}