Fokus Ereignis innerhalb einer Funktion nach einem Fokus Brennen

Question

ich einen versteckten Eingang mit meiner app mit ihm keybind aber ohne das Auslösen, wenn ich schreibe auf anderen Eingabefeldern

-clicks on element { 
    -hide element 
    -creates an input text-field(to edit the element) 
    -focus the input 
    - on blur or submit changes the element and remove the input 
} 

aber wenn Sie dieses Add neue Veranstaltung:

- click anywhere in the container { 
    -focus the hidden app input (so it can use keybinding) 
} 

, wenn der Benutzer auf das Element klickt beendet sie die Unschärfe Ereignis Brennen ohne den Benutzer zu bearbeiten lassen es zunächst, weil sein den zweiten Block Ereignis zu aktivieren. so ist es entweder den Fokus Teil des ersten Blocks oder der Fokus des zweiten Blocks nach dem Fokus auf dem ersten

aktivierend Überspringen ich vielleicht den falschen Ansatz es zu lösen, aber ich weiß nicht weiß, warum es sich so verhält.

eigentlichen Code:

$("#hiddenInput").focus() 
var elem = $("#nameClip"); 
function evenConditional(id) { 
    if ($(id).val() !== "") { 
     elem.text($(id).val()) 
     storedObj.name = $(id).val(); 
    } 
    $(id).parent().remove(); 
    elem.show(); 
} 
$("#name").on("click", function() { 
    elem.hide(); 
    elem.after(
     $("<form/>").append(
      $("<input/>").addClass("rename") 
     ) 
    ); 
    $(".rename").focus(); 
}); 
$(".rename").blur(function() { 
    evenConditional(this); 
}); 
$(".rename").closest("form").on("submit", function(e) { 
    e.preventDefault(); 
    evenConditional(this); 
}); 
/// regaining focus on click 
$(".container").on("click", function(e) { 
    $("#hiddenInput").focus() 
}); 

css:

#hiddenInput { 
    position:absolute; 
    top: -2000; 
} 

Answer 1

Da das #name Element im .container Element ist, wenn Sie darauf klicken, wird das Click-Ereignis Blasen in den Behälter nach oben, wodurch der Click-Event-Handler für den Container, der ausgeführt werden soll.

Eine Möglichkeit, dies zu beheben, wäre das Click-Ereignis von Sprudeln zu stoppen:

$("#name").on("click", function(e) { 
    e.stopPropagation(); 

Es kann Nebenwirkungen von, dass, obwohl zu tun. Insbesondere gibt es möglicherweise andere Event-Handler, die deswegen nicht ausgeführt werden. So wie Handler, die geöffnete Menüs schließen. Die andere Option wäre, im Click-Handler für den Container bedingte Logik zu platzieren, sodass sie nicht ausgeführt wird, wenn der Klick vom Element name stammt.