在模糊/焦点事件中,如果下一个焦点位于同一父元素中,如何使模糊不触发?

jscul

我认为这个问题很简单。代码如下。

<button onclick="toggleMenu()">Show Menu</button>

<div id="parent" class="hidden">
    <input type="text"></input>
    <input type="text"></input>
    <input type="text"></input>
</div>

<script>

    let parent = document.getElementById('parent');

    parent.addEventListener('focus', function () {
        // show parent
    });

    parent.addEventListener('blur', function () {
        // hide parent
    });

</script>

这个想法parent就像是汉堡菜单。它具有一个外部元素,您可以在其中切换其可见状态。出于可访问性原因,我想了解如何制作visibleshowing基于输入字段的重点。

这是可能吗?

上面的代码有效,但是我担心onblur()onfocus()每次用户更改输入字段时都会被调用。

尤金·奥利塞维奇(Eugene Olisevich)

您可以在父项上观看mousedown或touchstart事件。如果我没记错的话,您可以检查目标元素是否包含在父元素中,如果是,请阻止事件停止下一个事件,因此不会发生模糊。

这种行为的主要缺点是该动作不是在单击事件上触发的,并且用户不能仅通过将光标从按住鼠标按钮的菜单项移开就取消该动作。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

当元素集不总是位于同一父元素中时,如何查找下一个匹配的元素

如果其中任何一个子对象获得焦点,则防止触发模糊事件

按钮单击不触发当焦点设置为CellEndEdit上DataGridView中的下一个单元格时

如何从javascript中的焦点模糊事件获取元素值

是否有 jquery 事件在焦点离开元素之前或下一个元素获得焦点之前运行?

如何使用Tab键在下一个标签页中设置焦点?

如何将焦点设置在 *ngFor 指令中的下一个 <input>

将焦点移到另一个 div 中的下一个输入

如果使用组件,如何将焦点转移到下一个输入?

是否有可能获得一个元素的ID,该元素负责使另一个元素失去焦点,内部模糊或聚焦事件

如何将元素移至DOM中的下一个父元素?

将焦点自动更改为React Native中的下一个TextInput

recycleView小部件中的下一个焦点方向

将焦点设置到表中的下一个输入字段

将焦点设置为Xamarin表单中的下一个条目

将焦点更改为颤动中的下一个文本字段

如何通过输入将焦点放在剑道网格中的下一个单元格上

如何将请求焦点转移到 Jetpack compose 中的下一个文本字段

如何在 ngFor 中使用引用 id (#) 并在下一个 Ng 选择中获得焦点?

如果用户不更改选项,则将焦点移至下一个字段

如何使用共享同一父级的另一个表单中的值

如何将重复的元素附加到同一父元素的另一个元素中的不同父元素中

如何将数据从UIContainerView传递到另一个UIContainerView,它们位于同一父ViewController中?

for 中的下一个元素

将焦点移至下一个“li”元素,忽略所有嵌套元素

jQuery聚焦不同的事件,具体取决于下一个聚焦点

如果给定的EditText为空,如何防止焦点移至下一个字段?

getWindowHandles() 在 Firefox 中不起作用 58.焦点仍然在父选项卡上,不会转移到下一个选项卡

如何定位CSS中的下一个元素?