it-swarm.com.de

Verhindern Sie das Schießen des Fokusereignisses, wenn Sie auf div klicken

Diese Frage ähnelt meiner vorherigen Frage: Klicken Sie auf Focused DIV , , Klicken Sie auf die Aktion. Dieses Mal lautet das Hauptthema jedoch, wie verhindert wird, dass das Fokusereignis ausgelöst wird, wenn ich auf eines der divs . Letztes Mal klicke Ich hatte ein div mit tabindex = '- 1', um es beim Klicken fokussierbar zu machen, jetzt habe ich eine Liste von divs mit tabindex> 0, so dass sie auch beim Tabgen den Fokus bekommen können.

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

etwas Styling:

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

Jetzt verwende ich eine Flagge (Aktion), um eine Aktion (Warnung) auszulösen, wenn Sie zum 2. Mal auf das Div klicken, und mit nur einem Klick, wenn es bereits fokussiert ist, beispielsweise mit TAB.

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

Das Problem mit dem obigen Code ist, dass das Fokusereignis ausgelöst wird. Dies bedeutet, dass stopImmediatePropagation nicht wie erwartet funktioniert. Die Aktion mit zwei Klicks wirkt sich auf die Fokusereigniszeile aus. Sie müssen jedoch trotzdem doppelklicken, wenn div auf TAB fokussiert wird ..__ Hier ist das Beispiel: http://jsfiddle.net/3MTQK/1/

39
olanod

DEMO hier

Ich denke, dass Sie hier einige Teile vermissen,

  1. event.stopPropagation() wird verwendet, um das Sprudeln des Ereignisses zu verhindern. Sie können darüber lesen hier .

  2. event.stopImmediatePropagation() Zusätzlich zur Verhinderung, dass zusätzliche Handler für ein Element ausgeführt werden, stoppt diese Methode das Bubbling, indem event.stopPropagation() implizit aufgerufen wird. Sie können darüber lesen hier

  3. Wenn Sie Browserereignisse stoppen möchten, sollten Sie event.preventDefault() verwenden. Sie können darüber lesen hier

  4. click = mousedown + mouseup -> Der Fokus wird auf ein HTML-Element gesetzt, wenn die Maustaste gedrückt wird. Anstelle des click-Ereignisses sollten Sie 'mousedown' verwenden. Sehen Sie sich meine Demo an.

  5. Sie können nicht einen booleschen Aktionswert verwenden, um zu bestimmen, auf welches Div geklickt wurde und wie oft darauf geklickt wurde. Überprüfen Sie meine Demo, um zu sehen, wie Sie damit umgehen können. 

77

Um einfach den Brennfokus beim Klicken auf div zu verhindern, verwenden Sie einfach mousedown + event.preventDefault(). Verwenden Sie mousedown anstelle von click, da, wie @Selvakumar Arumugam erklärt, der Fokus ausgelöst wird, wenn mousedown erfolgreich ist und event.preventDefault () Browserereignisse (einschließlich unseres Fokus) stoppt.

Hier ist ein Codebeispiel:

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

Für den Moment wäre die offensichtliche Antwort, Ihren Selector von einfach 'div' auf ein System von umschaltbaren Klassennamen zu beschränken, wodurch Sie steuern könnten, auf welches Element Ihr Fokusereignis ausgelöst werden sollte. Es ist langwieriger und erfordert etwas mehr Ausnahmecodierung, würde aber die Aufgabe erfüllen.

0
Ken