Blur event not firing on <label> - can't find workaround for dealing with hide-on-blur <input> text field

Question

TL;DR how can I get this self-explanatory JSFiddle to work?

From 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.

The basic idea, 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>

And JS:

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

It doesn't work. A more illustrative example is in this JSFiddle.

I also tried focusout, with this JSFiddle, but (presumably because it bubbles up from the input), it always fires.

I could probably rig up what I need with a hack like this: https://stackoverflow.com/a/5049387/458614 but I'd rather not have to.

---

Edit: There are lots of related questions and I have read all that I could find, none of which help. Some talk about setting tabindex=0 on the form or label elements. I have tried this in various permutations but it doesn't help. JSFiddle here. If you put it on the form, blur events do fire when you click outside the form. However, it doesn't apply to any of it's children: it won't pick up anything if you click on the input and then outside the form.

---

Edit 2: I don't really understand some of the answers posted so far and none seem to really... work. Anyway, to clarify, here is what I am trying to accomplish:

In my app, you can add tags to documents. When you click the "add tag" button, a previously-hidden text input field pops up and is focused. And then...

1. Clicking outside (on blur) should close the text input field again
2. Pressing enter should add the tag and close the input field
3. Clicking the "add tag" button should also add the tag and close the input field

The problem is that #1 and #3 are incompatible. The "add tag" button needs to perform a different action based on whether the text field is open or closed, but because I can only achieve #1 with an onblur event on the text field, the text field is closed by the time any action happens on the "add tag" button for #3.

Here is a JSFiddle with my best attempt so far.

Answer 1

The thing I think you are looking for is

e.stopPropagation();

This Fiddle here shows a little different way to handle it ... it put the hide on a window click (which would blur the input anyways) except on the label, which it would allow the click event to stop inside the label.

Happy coding!