IE, klicken Sie auf Kind nicht konzentrieren, Elternteil, Elternteil hat tabindex=0

Ereignisse abfangen und mit JS zu setzen, endete verursacht mehr Probleme.

Habe ich schließlich herausgefunden, dass die Verwendung von "normalen" tags, wie divs oder überspannt und lässt IE sich falsch Verhalten. Aber so etwas wie var oder benutzerdefinierte Tags und IE benimmt sich wie ein richtiger browser.

Siehe Aktuelles Beispiel: http://jsfiddle.net/fergal_doyle/anXM3/16/

HTML:

<div tabindex="0" id="test">
     <var class="iesux">Works</var>
     <foo class="iesux">Works</foo>
     <div class="iesux">Doesn't work in IE</div>
     <span class="iesux">Doesn't work in IE</span>
</div>

CSS:

div {
     border:1px solid #000;
     padding:20px;
     background-color:red;
}
.iesux {
     border:1px solid #000;
     display:block;
     padding:8px;
     background-color:#FFF;
     cursor:default;
     width:200px;
}

JS:

document.createElement("foo");

var $div = $("#test");

$div.on("blur", function (e) {
     console.log("blur");
})
     .on("focus", function (e) {
     console.log("focus")
});

Klick auf ein element mit tabindex=0 in IE wird das Ergebnis in das element, gewinnen unsichtbare konzentrieren. Die Art und Weise zu gewinnen sichtbaren Fokus programmgesteuert aufrufen focus (), während das element nicht bereits unsichtbar konzentrieren. Da der Fokus geschieht unmittelbar nach dem mousedown, das heißt, wir müssen:

$('#parent').mousedown(function(e){
    var parent = $(e.currentTarget)
    if (!parent.is(':focus')) {
        parent.focus()
    }
}).focus(function(e){
    console.log('focused')
}).blur(function(e){
    console.log('blurred')
})

Wenn das Kind inline-oder block mit keine Breite gesetzt, der Effekt ist der gleiche, wie auf direkt auf die Muttergesellschaft. Jedoch, wenn das Kind ist ein inline-block oder ein block mit einer Breite legen, und die Eltern hatten bereits gefasst, dann die Eltern blur() direkt nach dem mousedown-Handler ausgeführt werden. Wir haben drei verschiedene Möglichkeiten, mit anderen Kompromisse.

Ist eine option, um nur zu unterdrücken, die Unschärfe mit preventDefault(); die Tugend dieses Ansatzes ist, dass blur() wird nie ausgelöst wird, und der focus() wird nicht ausgelöst, Redundant, das uns ermöglicht, zu schreiben, einfache Logik in unserem Fokus und Unschärfe-Handler; der Vize von diesem Ansatz ist, dass es deaktiviert Textauswahl:

$('#child').mousedown(function(e){
    e.preventDefault()
})
$('#parent').mousedown(function(e){
    var parent = $(e.currentTarget)
    if (!parent.is(':focus')) {
        parent.focus()
    }
}).focus(function(e){
    console.log('focused')
}).blur(function(e){
    console.log('blurred')
})

Wenn wir nicht wollen, deaktivieren Sie die text-Auswahl, eine weitere Möglichkeit ist die Konzentration auf die Eltern des Kindes mouseup; doch ist dieser Weg der Eltern wird unscharf und dann wieder den Fokus, die uns daran hindert, zu wissen, Wann ein Fokus oder Unschärfe "echt" ist vielmehr als nur eine vorübergehende Folge unserer Fokus-Vermehrung Logik:

$('#child').mouseup(function(e){
    $(e.currentTarget).closest('[tabindex]').focus()
})
$('#parent').mousedown(function(e){
    var parent = $(e.currentTarget)
    if (!parent.is(':focus')) {
        parent.focus()
    }
}).focus(function(e){
    console.log('focused')
}).blur(function(e){
    console.log('blurred')
})

Die Dritte option hat die Vorzüge der beiden oben genannten Ansätze, aber ist das komplizierteste logisch:

$('#parent').mousedown(function(e){
    var parent = $(e.currentTarget)
    var parentWasClicked = parent.is(e.target)
    var parentHasFocus = parent.is(':focus')
    if (parentWasClicked && !parentHasFocus) {
        parent.focus()
    } else if (parentHasFocus && !parentWasClicked) {
        window.ignoreFocusChanges = true
    }
})
.mouseup(function(e){
    var parent = $(e.currentTarget)
    if (!parent.is(':focus')) {
        parent.focus()
    }
})
.blur(function(e){
    if (window.ignoreFocusChanges) {
        return
    }
    console.log('blurred')
})
.focus(function(e){
    if (window.ignoreFocusChanges) {
        window.ignoreFocusChanges = false
        return
    }
    console.log('focused')
})

Diese Frage ist alt, aber ich kam gerade über diesem problem und folgende Lösung funktioniert im IE11 und ist viel einfacher als alle anderen:

.iesux {
     border:1px solid #000;
     display:block;
     padding:8px;
     background-color:#FFF;
     cursor:default;
     width:200px;
     pointer-events: none;
}

Es ist nicht unterstützt in IE<11 leider aber wenn man bekommen kann Weg mit, dass es ist bei weitem die einfachste.

http://jsfiddle.net/anXM3/22/