模糊事件未在<label>上触发 - 找不到处理hide-on-blur <input>文本字段的解决方法

Question

TL; DR如何让这个不言自明的JSFiddle工作？

来自W3C:

当元素通过指点设备或通过Tab键导航失去焦点时,会发生模糊事件.此事件对以下元素有效:LABEL,INPUT,SELECT,TEXTAREA和BUTTON.

HTML的基本思路:

<form>
    <label>
        <input type="text" />
        <a href="#">after focusing in input, there should be no blur when clicking here</a>
    </label>
</form>
<a href="#">but blur should fire when clicking here</a>

和JS:

$("form, label").on("blur", function() {
    alert("you're not going to see this");
});

它不起作用.一个更具说明性的例子就是这个JSFiddle.

我也尝试过focusout,使用这个JSFiddle,但是(大概是因为它从输入中冒出来),它总是会触发.

我可以通过这样的黑客来安装我需要的东西:https://stackoverflow.com/a/5049387/458614但我宁愿不必.

---

编辑:有很多相关的问题,我已经阅读了所有我能找到的,没有一个有用.有的谈设置tabindex=0上form或label元素.我已经尝试了各种排列,但它没有帮助.JSFiddle在这里.如果你把它放在form,blur事件就当您单击窗体的外线火力.但是,它并不适用于它的任何一个孩子:如果你点击它input然后在外面,它将不会拾取任何东西form.

---

编辑2:我真的不明白到目前为止发布的一些答案,似乎没有真正......工作.无论如何,澄清一下,这是我想要完成的事情:

在我的应用中,您可以为文档添加标签.单击"添加标记"按钮时,会弹出一个先前隐藏的文本输入字段并进行聚焦.然后...

1. 单击外部(模糊)应再次关闭文本输入字段
2. 按Enter键应添加标记并关闭输入字段
3. 点击"添加标签"按钮应该还添加标记,并关闭输入栏

问题是#1和#3是不兼容的."添加标记"按钮需要根据文本字段是打开还是关闭来执行不同的操作,但由于我只能在文本字段上使用onblur事件实现#1,因此文本字段会在任何操作时关闭发生在#3的"添加标签"按钮上.

这是迄今为止我最好的尝试的JSFiddle.

Answer 1

我认为你正在寻找的是

e.stopPropagation();

这里的小提琴显示了一种稍微不同的处理方式......它将隐藏在窗口单击上（这无论如何都会模糊输入），但在标签上除外，这将允许单击事件在标签内停止。

快乐编码！