Verhindern Sie das Auslösen des Fokusereignisses beim Klicken auf ein Div-Element.

Question

Diese Frage ähnelt meiner vorherigen Frage, Klickaktion auf fokussiertem DIV, aber diesmal geht es hauptsächlich darum, wie das Auslösen des Fokusereignisses verhindert werden kann, wenn ich eines der DIVs anklicke. Letztes Mal hatte ich ein div mit tabindex='-1', um es anklickbar zu machen, jetzt habe ich eine Liste von divs mit tabindex>0, damit sie auch durch Tabulatoren den Fokus erhalten können.

Div eins
Div zwei
Div drei
Div vier

einige Styles:

div {
    Höhe: 20px;
    Breite: 60%;
    Rand: solide 1px blau;
    Textausrichtung: Zentrum;
}
div:focus {
    Rand: solide 2px rot;
    Umrandung: keiner;
}

Jetzt benutze ich ein Flag (Aktion), um eine Aktion (Alert) auszulösen, wenn ich das Div zum zweiten Mal anklicke, und mit nur einem Klick, wenn es bereits fokussiert ist, z.B. mit einer Tab-Taste.

var aktion = false;
$('div')
    .klicken(function(e){
        e.stopImmediatePropagation();
        if(aktion){alert('aktion');}
        aktion = true;})
    .fokus(function(){aktion = true;})
    .unscharf(function(){aktion = false;});

Das Problem bei dem obigen Code ist, dass das Fokus-Ereignis ausgelöst wird, was bedeutet, dass stopImmediatePropagation nicht wie erwartet funktioniert. Die Zwei-Klick-Aktion funktioniert, wenn die Fokusereigniszeile auskommentiert wird, aber Sie müssen dennoch zweimal klicken, wenn das Div durch Tabulatoren den Fokus erhält. Hier ist das Beispiel: http://jsfiddle.net/3MTQK/1/

Answer 1

DEMO hier

Ich denke, hier fehlen einige Teile,

1. event.stopPropagation() wird verwendet, um das Ereignis am Weiterbubbeln zu hindern. Du kannst darüber lesen hier.

2. event.stopImmediatePropagation() Neben der Verhinderung, dass weitere Handler auf einem Element ausgeführt werden, stoppt diese Methode auch das Bubbeln, indem implizit event.stopPropagation() aufgerufen wird. Du kannst darüber lesen hier

3. Wenn du Browser-Ereignisse stoppen möchtest, solltest du event.preventDefault() verwenden. Du kannst darüber lesen hier

4. click = mousedown + mouseup -> Der Fokus wird auf ein HTML-Element gesetzt, wenn der Mausklick erfolgreich ist. Anstatt das click-Ereignis zu binden, solltest du 'mousedown' verwenden. Sieh dir mein Demo an.

5. Du kannst keinen einzigen Aktions-Boolean-Wert verwenden, um festzustellen, welches div angeklickt wurde und wie oft es angeklickt wurde. Schau dir mein Demo an, um zu sehen, wie du damit umgehen kannst.

Answer 2

Um das Auslösen von Fokus beim Klicken auf ein Div einfach zu verhindern, verwenden Sie einfach mousedown + event.preventDefault(). Verwenden Sie mousedown anstelle von click, weil, wie @Selvakumar Arumugam erklärt hat, der Fokus beim erfolgreichen Mousedown ausgelöst wird und event.preventDefault() Browserereignisse stoppen wird (einschließlich unserem Fokus).

Hier ist ein Codebeispiel:

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

Answer 3

Einfach,

//  Nicht (Fokus bereits beim Klicken gesetzt)
onClick={e => e.preventDefault()}

//  Ja (Fokus verhindern)
onMouseDown={e => e.preventDefault()}

Answer 4

Zurzeit wäre die offensichtliche Antwort, Ihren Selektor nicht einfach auf 'div' zu beschränken, sondern auf ein System von umgeschalteten Klassennamen, damit Sie kontrollieren können, auf welchem Element Ihr Fokusevent ausgelöst wird. Es ist mühsamer und erfordert etwas mehr Ausnahmecode, würde aber die Arbeit erledigen.

Answer 5

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