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

问题描述

我在页面上有一个 div，显示有关特定类别(图像、名称等)的一些信息.

当我单击编辑图像时，它会将类别置于编辑模式，从而允许我更新名称.从下图可以看出，Soup"当前处于编辑模式，其他处于正常查看模式.这一切都按预期工作，取消/保存按钮一切正常.(我尝试添加图像但不让我，需要更多的爱)

然而一旦进入编辑模式，如果我点击页面上的任何其他地方(div 之外)，预期的结果将是汤类别将返回查看模式.在某种类型的事件触发时，这也应该允许我询问他们是否想要保存更改.

所以我决定做的是在soups"父 div 上创建一个模糊事件.如果我点击页面上的任何地方，这会按预期工作，但是如果我点击 div 的内部元素，它也会导致父模糊事件被触发，从而导致类别返回查看模式.

那么，如果父 div 中的任何一个获得焦点，是否有办法防止父 div 触发模糊事件?

<input type="text" value="Soup"/>

我只是在没有编译器的情况下编写了代码，所以不确定这是否有效，但希望你能明白.

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

解决方案

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

因为点击事件在模糊之后触发，所以没有(跨浏览器、可靠的)方法来判断哪个元素获得焦点.

然而，鼠标按下会在模糊之前触发.这意味着您可以在子元素的 mousedown 中设置一些标志，并在父元素的模糊中询问该标志.

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

请注意，如果您还想捕捉由键盘引起的模糊，您还必须处理 keydown(并检查 tab/shift-tab).

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

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)

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.

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.

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.

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

Working example: http://jsfiddle.net/L5Cts/

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屋！