Question

我正在使用隐藏的输入来键入我的应用程序，但是当我在其他输入字段上书写时没有触发事件

-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
 }

但是如果你添加这个新事件：

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

当用户点击元素时，它会终止触发模糊事件，而不会让用户先编辑它，因为它会激活第二个块事件。所以它要么跳过第一个块的焦点部分或者在关注第一个块之后激活第二个块的焦点

我可能正在使用错误的方法来解决它但我不知道为什么它会这样表现。

实际代码：

$("#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

由于#name元素位于.container元素中，当您单击它时，click事件会冒泡到容器，导致容器的click事件处理程序被执行。 / p>

解决此问题的一种方法是阻止点击事件冒泡：

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

尽管如此，这可能会产生副作用。特别是，可能还有其他事件处理程序因此而无法执行。比如关闭打开菜单的处理程序。

另一个选项是将条件逻辑放在容器的单击处理程序中，这样如果点击源自name元素，它就不会执行。

$(".container").on("click", function(e) {
    var nameElement = $("#name")[0];
    if ((e.target != nameElement) and !$.contains(nameElement , e.target)) {
        $("#hiddenInput").focus();
    }
});

焦点事件在函数内部焦点后触发

1 个答案: