如果任何一个子节点获得焦点，则阻止触发模糊事件 [英] Prevent firing the blur event if any one of its children receives focus

问题描述

我在页面上有一个div，显示有关特定类别（图像，名称等）的一些信息。

I have a div on a page that shows some info about a particular category (Image, Name etc).

当我点击编辑图像时，它会将类别置于编辑模式，这样我就可以更新名称。从下图中可以看出，它显示Soup当前处于编辑模式，其他处于正常视图模式。这一切都按预期工作，取消/保存按钮做正确的事情。 （我尝试添加图片，但不会让我，需要更多的爱）

When I click on the edit image it puts the category into edit mode which allows me to update the name. As you can see from the image below it shows that "Soup" is currently in edit mode, the others are in normal view mode. This all works as expected with the cancel / save buttons doing everything right. (I tried adding an image but wouldn't let me, need more love)

然而一旦处于编辑模式，如果我点击其他任何地方页面（div之外）预期的结果将是汤类别将返回查看模式。在某种事件发生后，这也应该让我问他们是否想要保存更改。

However once in edit mode if I click anywhere else on the page (Outside of the div) the expected result would be that the soup category would go back to view mode. Upon an event firing of some sort, this should also allow me to ask if they wanted to save changes.

所以我接下来决定创建一个模糊事件汤父母div。如果我单击页面上的任何位置，这将按预期工作，但是如果我单击div的内部元素，它也会导致父模糊事件被触发，从而导致类别返回到查看模式。

So what I then decided to do is create an blur event on the "soups" parent div. This works as expected if I click anywhere on the page, however if I click on the inner element of the div it also causes the parents blur event to be fired, thus causing the category to go back to view mode.

那么，有没有办法阻止父div在其任何一个孩子获得焦点时触发模糊事件？

So, is there a way to prevent the parent div from firing the blur event if any one of its children receive focus?

<div tabindex="-1" onblur="alert('outer')">
    <input type="text" value="Soup" />
</div>

我刚刚编写了没有编译器的代码，所以不确定这是否有效，但希望你得到这个想法。

I just wrote the code without a compiler so not sure if that even works but with that hopefully you get the idea.

我正在使用Knockout.js动态更新GUI，但这不应该影响我不会想到的答案。

I'm using Knockout.js to update the GUI on the fly but that shouldn't effect this answer I wouldn't have thought.

推荐答案

我以前必须解决这个问题。我不确定它是否是最好的解决方案，但它是我最终使用的。

I've had to tackle this problem before. I am not sure if it is the best solution, but it is what I ended up using.

由于点击事件在模糊后触发，因此没有（交叉 - 浏览器，可靠的）告诉哪个元素获得焦点的方式。

Since the click event fires after the blur, there is no (cross-browser, reliable) way to tell what element is gaining focus.

然而，模糊之前，Mousedown会被激活。这意味着您可以在子元素的mousedown中设置一些标志，并在父母的模糊中查询该标志。

Mousedown, however, fires before blur. This means that you can set some flag in the mousedown of your children elements, and interrogate that flag in the blur of your parent.

工作示例： http://jsfiddle.net/L5Cts/

请注意，你会还要处理 keydown （并检查tab / shift-tab）是否还要捕捉键盘引起的模糊。

Note that you will also have to handle keydown (and check for tab/shift-tab) if you want to also catch blurs caused by the keyboard.

这篇关于如果任何一个子节点获得焦点，则阻止触发模糊事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！