javascript - Blur 事件未在 上触发 - 无法找到处理 hide-on-blur <input> 文本字段的解决方法

Question

TL;DR 我怎样才能得到这个 self-explanatory JSFiddle上类？

来自 the W3C :

The blur event occurs when an element loses focus either via the pointing device or by tabbing navigation. This event is valid for the following elements: LABEL, INPUT, SELECT, TEXTAREA, and 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");
});

这是行不通的。一个更具说明性的例子在 this JSFiddle 中。 .

我还尝试了 focusout，使用 this JSFiddle , 但是(大概是因为它从输入中冒出来)，它总是触发。

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

---

编辑: 有很多相关问题，我已经阅读了所有我能找到的内容，但都没有帮助。有些人谈论在 form 或 label 元素上设置 tabindex=0。我已经尝试过各种排列，但没有帮助。 JSFiddle here .如果将它放在 form 上，当您在表单外部单击时，blur 事件会触发。但是，它不适用于它的任何子级:如果您单击 input 然后在 form 之外，它不会拾取任何东西。

---

编辑 2: 我不太理解目前发布的一些答案，而且似乎没有一个真的......有效。无论如何，澄清一下，这是我想要完成的:

在我的应用程序中，您可以为文档添加标签。当您单击“添加标签”按钮时，一个先前隐藏的文本输入字段会弹出并获得焦点。然后……

1. 点击外部(模糊)应再次关闭文本输入字段
2. 按回车键应该添加标签并关闭输入字段
3. 单击“添加标签”按钮应该也添加标签并关闭输入字段

问题是#1 和#3 不兼容。 “添加标签”按钮需要根据文本字段是打开还是关闭来执行不同的操作，但是因为我只能通过文本字段上的 onblur 事件实现#1，文本字段在#3 的“添加标签”按钮上发生任何操作时关闭。

这是一个JSFiddle with my best attempt so far .

Answer 1

我想你要找的是

e.stopPropagation();

This Fiddle here显示了一种稍微不同的处理方式……它隐藏了窗口点击(无论如何都会模糊输入)，但标签除外，这将允许点击事件在标签内停止。

编码愉快!