如果模糊事件的任何一个子项获得焦点,请阻止启动模糊事件
Prevent firing the blur event if any one of its children receives focus
我在一个页面上有一个div,它显示了关于特定类别(图像、名称等)的一些信息。
当我点击编辑图像时,它会将类别置于编辑模式,允许我更新名称。正如你从下面的图片中看到的,它显示"汤"目前处于编辑模式,其他的都处于正常视图模式。这一切都如预期的那样工作,取消/保存按钮做得很好。(我试着添加一张图片,但不允许,需要更多的爱)
但是在编辑模式下,如果我单击页面上的其他任何位置(div之外),预期结果将是汤类将返回到查看模式。在某种事件触发时,这也应该允许我询问他们是否希望保存更改。
因此,我决定在"汤"父div上创建一个模糊事件。如果我单击页面上的任何位置,这都可以正常工作,但如果我单击div的内部元素,它也会导致父模糊事件被触发,从而使类别返回到视图模式。
那么,如果父div的任何一个子div接收到焦点,有没有办法防止它触发模糊事件?
<div tabindex="-1" onblur="alert('outer')">
<input type="text" value="Soup" />
</div>
我只是在没有编译器的情况下编写代码,所以不确定这是否有效,但希望你能理解。
我正在使用Knockout.js动态更新GUI,但这不会影响我从未想过的答案。
我也遇到了同样的问题。这对我有效。
handleBlur(event) {
// if the blur was because of outside focus
// currentTarget is the parent element, relatedTarget is the clicked element
if (!event.currentTarget.contains(event.relatedTarget)) {
.....
}
}
享受:)
我以前不得不解决这个问题。我不确定这是否是最好的解决方案,但这就是我最终使用的解决方案。
由于单击事件在模糊后触发,因此没有(跨浏览器、可靠的)方法来判断哪个元素正在获得焦点。
然而,Mousedown在模糊之前开火。这意味着您可以在子元素的mousedown中设置一些标志,并在父元素的模糊中查询该标志。
工作示例:http://jsfiddle.net/L5Cts/
请注意,如果您还想捕捉键盘引起的模糊,则还必须处理keydown
(并检查制表符/移位制表符)。
我认为不能保证mousedown
会在所有浏览器的焦点事件之前发生,所以处理这一问题的更好方法可能是使用evt.relatedTarget
。对于focusin
事件,eventTarget
属性是对当前失去焦点的元素的引用。您可以检查该元素是否是父元素的后代,如果不是,则您知道焦点是从外部进入父元素的。对于focusout
事件,relatedTarget
是对当前正在接收焦点的元素的引用。使用相同的逻辑来确定焦点是否完全离开父对象:
const parent = document.getElementById('parent');
parent.addEventListener('focusin', e => {
const enteringParent = !parent.contains(e.relatedTarget);
if (enteringParent) {
// do things in response to focus on any child of the parent or the parent itself
}
});
parent.addEventListener('focusout', e => {
const leavingParent = !parent.contains(e.relatedTarget);
if (leavingParent) {
// do things in response to fully leaving the parent element and all of its children
}
});
- 模糊事件的Javascript测试
- Primefaces编辑器模糊事件
- ContentEditable Div模糊事件
- MVC-模糊事件的远程验证
- 密码模糊事件未显示
- 如果模糊事件的任何一个子项获得焦点,请阻止启动模糊事件
- 当孩子获得焦点时触发模糊事件
- JQuery无法将模糊事件绑定到所有<输入>页面中的元素
- 为什么在模糊事件处理程序中添加setTimeout会修复“;掩蔽”;另一个单击处理程序的
- 观察其他场模糊事件
- 如何使用输入模糊事件更新多个具有相同类名的标签的文本
- 当我在firefox浏览器下点击contenteditable时,它会触发模糊事件
- 以编程方式模糊 EXTJS 3.2.1 中的组合框控件不会触发“模糊”事件
- 当发生模糊事件时,如何在元素上备份选定的文本
- 单击跨度会导致模糊事件,该事件会移动跨度,使其不注册单击
- 双驱动模糊事件
- 提交事件在模糊事件触发 JavaScript 确认后未触发
- 如果单击焦点元素的子元素,则会在获得焦点的父元素上触发模糊事件
- 如何在输入中模糊文本模糊事件
- 如何为 @Html.Editor() 编写焦点和模糊事件