首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

在模糊/焦点事件中,如果下一个焦点在同一个父元素中,可以通过以下方法使模糊不触发:

  1. 使用事件委托:将事件处理程序绑定到父元素上,而不是直接绑定到子元素上。这样当子元素触发模糊事件时,事件会冒泡到父元素,然后可以在父元素的事件处理程序中判断下一个焦点是否在同一个父元素中,如果是,则取消模糊事件的默认行为。
  2. 使用事件捕获:将事件处理程序绑定到父元素的捕获阶段,而不是冒泡阶段。这样当子元素触发模糊事件时,事件会在父元素的捕获阶段被处理,然后可以在事件处理程序中判断下一个焦点是否在同一个父元素中,如果是,则取消模糊事件的默认行为。
  3. 使用事件对象的相关属性:在模糊事件的处理程序中,可以通过事件对象的相关属性来判断下一个焦点是否在同一个父元素中。例如,可以使用事件对象的relatedTarget属性来获取下一个焦点元素,然后判断其是否是当前父元素的子元素,如果是,则取消模糊事件的默认行为。

需要注意的是,具体的实现方式可能会因不同的编程语言和框架而有所差异。在前端开发中,可以使用JavaScript和相关的DOM操作方法来实现上述方法。对于具体的代码实现,可以参考相关的前端开发文档和教程。

关于模糊/焦点事件的更多信息,可以参考以下链接:

请注意,以上回答仅代表个人观点,不涉及任何特定云计算品牌商的产品推荐。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【译】W3C WAI-ARIA最佳实践 -- 控件

当前活跃窗口之外的非活跃内容,一般是模糊不清或灰暗的,这样就让这些内容很难被辨别,并且某些实现如果试图与非活跃内容进行交互将导致对话框被关闭。...注意:强烈建议使用大于0的值。 当对话框被打开时,焦点移动到对话框内的元素。请参阅下面关于初始焦点处理的注释。 Tab: 将焦点移到对话框内的下一个可聚焦元素。...Right Arrow: 移动焦点下一个选项卡元素如果焦点在最后一个选项卡元素上,移动焦点到第一个选项卡元素。...NOTE 当工具提示组件显示时,焦点停留在触发元素上。 如果触发元素获得焦点时唤起工具提示组件,当元素失去焦点时(onBlur),工具提示组件消失。...Right arrow: 当焦点在展开节点上,收起节点,焦点不移动。 当焦点在展开节点上,将焦点移动第一个可聚焦节点上。 当焦点在最后一个节点上,不响应事件

4.5K30

web前端必备英语词汇都在这儿了,客官你了解多少?

..之前 blur 当输入框失的时候触发 BOM 全称Browser Object Model 浏览器对象模型 blur 失 bind 绑定 background 背景border 边框 border...createTextNode 创建文本节点 childNodes 返回子节点 cancelBubble 删除冒泡 click 点击事件 change 内容发生改变,并失触发事件 contextmenu...DOMMouseScroll 火狐浏览器的滚轮事件 document 文件,文档 dbclick 双击 dashed 虚线 display 显示,CSS 的一个属 decimal 十进制 division...nextSibling 返回下一个兄弟节点 nextElementSibling 下一个兄弟元素 nodeValue 节点值 nodeType 节点类型 nodeName 标签名称 navigation...onkeypress 在按键时 onsubmit 提交时 onchange 改变时 onfocus 获得焦点时 onblur 失去焦点时 onscroll 窗口滚动事件 onresize 窗口大小监听事件

3K20
  • 31. 镜头、曝光,以及对焦(上)

    一、小孔相机的缺点 29. 小孔相机,我们知道了小孔相机的特点 ? 它能使得真实物体透过小孔屏幕上成一个倒像。而且我们知道,理想的小孔具有无限小的尺寸。...而相反,如果小孔太大,同一个像点的光会来自于多个物点,也会导致图像的模糊。所以只有两者之间某个平衡的尺寸,才能让成像既比较清晰,又具有较低的噪声。...平行光穿过镜头后,会汇聚到平面上的一点上: ? 那么,如果一个物点发出了一束光,它们穿过薄透镜后的运动轨迹如何呢? ? 首先,穿过光心的光线会直线传播: ? 其他光线呢?...根据这种模型,当对焦完成后,从一个物点发出的光线通过透镜后会汇聚到平面的一点上,而从一个平行于镜头的平面上发出的所有点则会汇聚在同一个平面上: ? 如果已知物体的高度,怎么求像的高度呢? ?...事实上,从物体上一点发出的光线通过透镜后,最终像平面上会变成一个二维投影,如果镜头是圆形的,那么这个投影就是圆形的。我们通常称这个投影为模糊环(Circle of Confusion)。

    87920

    JavaScript鼠标事件细讲:执行顺序+注意事项+区别比对

    JavaScript ,鼠标事件是 Web 开发中最常用的事件类型,本篇算是笔记吧。...当用户的焦点在按钮上并按了 Enter 键时,同样会触发这个事dblclick:双击鼠标左键时发生,如果右键也按下则不会发生contextmenu :弹出右键菜单。...区别点:mouseenter不会冒泡,简单的说,它不会被它本身的子元素的状态影响到.mouseover就会被它的子元素影响到,触发元素的时候,mouseover会冒泡触发它的元素....:mouseover和mouseenter的异同体现在两个方面:是否支持冒泡事件触发时机可见mouseover事件因其具有冒泡的性质,元素内移动的时候,频繁被触发如果我们希望如此,可以使用mouseenter...》mouseup-》click-》blurmousedown、mouseup、click若在同一个元素上按下并松开鼠标左键,会依次触发mousedown、mouseup、click,前一个事件执行完毕才会执行下一个事件若在同一个元素上按下并松开鼠标右键

    3.6K21

    移动端H5页面开发坑点指南

    ,所以苹果系统和安卓系统通常都会禁止自动播放和使用JS的触发播放,必须由用户来触发播放;解决方法思路:先通过用户touchstart触碰触发播放并暂停(让音频开始加载),后面用JS再操作就没问题了;解决代码...IOS对input键盘事件keyup/keydown/keypress等支持不好的问题 经查发现,IOS的输入法(不管是第三方还是自带)能检测到英文或数字的keyup,但检测不到中文的keyup,输入中文后需要点回退键开始搜索...;初学者会认为当前事件所绑定的元素就是鼠标所点击的那个元素,这时就要看看时间绑定的元素内部有没有子元素,如果有e.target指向这个子元素,如果没有e.target和this都指向事件所绑定的元素...(label,span)监听click事件,ios下不会触发 针对此种情况只需对触发click事件元素添加一行css代码即可 cursor: pointer; ios对时间date()的支持不一样...this.handleFocusOut(); this.handleResize(); }, methods:{ handleFocusOut() { // input 焦点

    3.1K10

    神奇的选择器 :focus-within

    它表示一个元素获得焦点,或,该元素的后代元素获得焦点。划重点,它或它的后代获得焦点。 这也就意味着,它或它的后代获得焦点,都可以触发 :focus-within。...:focus-within 的冒泡性 这个属性有点类似 Javascript 的事件冒泡,从可获元素开始一直冒泡到根元素 html,都可以接收触发 :focus-within 事件,类似下面这个简单的例子这样...我们无须去给获元素设置 :focus 伪类,而是可以给需要的元素设置,这样当元素时,我可以一并控制它的元素的样式 核心思想用 CSS 代码表达出来大概是这样: <div class="g-container...可以<em>在</em><em>父</em>节点获取<em>元素</em>获得<em>焦点</em>的特性,实现的TAB导航切换: ?...可以看到,上面的效果没有用到任何 JS,可以实现: 整个 input(包括<em>父</em><em>元素</em>所在区域)获<em>焦</em>与非获<em>焦</em>样式控制 placeholder 属性设置的文字出现与消失后样式控制 CodePen Demo —

    1.1K20

    神奇的选择器 `:focus-within`

    当然,也有例外,对于 CSS2 已经有的伪元素,例如 :before,单冒号和双冒号的写法 ::before 作用是一样的。...它表示一个元素获得焦点,或,该元素的后代元素获得焦点。划重点,它或它的后代获得焦点。 这也就意味着,它或它的后代获得焦点,都可以触发 :focus-within。...:focus-within 的冒泡性 这个属性有点类似 Javascript 的事件冒泡,从可获元素开始一直冒泡到根元素 html,都可以接收触发 :focus-within 事件,类似下面这个简单的例子这样...我们无须去给获元素设置 :focus 伪类,而是可以给需要的元素设置,这样当元素时,我可以一并控制它的元素的样式 核心思想用 CSS 代码表达出来大概是这样: <div class="g-container...纯CSS的导航栏Tab切换方案 现在又多了一种方式,利用了 :focus-within 可以<em>在</em><em>父</em>节点获取<em>元素</em>获得<em>焦点</em>的特性,实现的TAB导航切换: [focuswithintab] DEMO --

    1.2K50

    web前端常见面试题

    捕获阶段的行为: 浏览器检查元素的最外层祖先,是否捕获阶段中注册了一个onclick事件处理程序,如果是,则运行它; 然后,它移动到单击元素下一个祖先元素,并执行相同的操作...,然后是单击元素下一个祖先元素,依此类推,直到到达实际点击的元素; 而冒泡与捕获恰恰相反: 浏览器检查实际点击的元素是否冒泡阶段中注册了一个onclick事件处理程序,如果是,则运行它; 然后它移动到下一个直接的祖先元素...因此上面代码点击子元素时会先执行子元素绑定的事件,然后向上冒泡,触发元素绑定的事件。 addEventListener 函数的第三个参数是个布尔值。...比如: blur 元素失去焦点触发,focusout 事件也是失去焦点触发,但可以冒泡; focus 元素获取焦点触发; mouseenter 鼠标移动到元素上时会触发事件,与之对应的是 mouseover...事件,但会冒泡; mouseleave 鼠标离开元素触发,与之对应的是 mouseout,但会冒泡; 事件冒泡可以让我们利用事件委托,尤其是处理大量子元素时,如果给每个子元素都绑定事件,这是优雅的

    2.3K20

    前端优秀实践不完全指南

    这个时候,我们可以借助 object-fit,它能够指定可替换元素的内容(也就是图片)该如何适应它的容器的高宽。...页面上可以聚焦的元素,称为可聚焦元素,获得焦点元素,则会触发元素的 focus 事件,对应的,也就会触发元素的 :focus 伪类。...:focus 伪类不论用户使用鼠标还是使用键盘,只要元素,就会触发。...有了这个伪类,就可以做到,当用户使用鼠标操作可聚焦元素时,展示 :focus 样式或者让其表现较弱,而当用户使用键盘操作焦点时,利用 :focus-visible,让可获元素获得一个较强的表现样式。...上述操作全是键盘下完成,看着平平无奇,实际上组件库正常响应可获元素切换的同时,给用 div 模拟的 select 加了很多键盘事件的响应,可以利用回车,上下键等对可选项进行选择。

    98520

    作为前端程序员:你必须知道的常用英语词汇!!全是干货!!!

    animate 动画 animation 动画片 alert 提醒 add 加 append 添加 after 之后 B back 超过范围的三次方缓动 bounce 指数衰减的反弹缓动 before …...之前 blur 当输入框失的时候触发 BOM 全称 Browser Object Model 浏览器对象模型 blur 失 bind 绑定 background 背景 border 边框 banner...createTextNode 创建文本节点 childNodes 返回子节点 cancelBubble 删除冒泡 click 点击事件 change 内容发生改变,并失触发事件 close 关闭当前页面...confirm 输入框 clientWidth 获取元素宽度 clientHeight 获取元素的高度 childNodes 获取所有子节点 children 返回子元素 cloneNode 复制节点...else 否则 empty 空 F font 字体 form 表单 footer 页脚 from…to 从…到 first 第一 focus 焦点 fadeIn 淡入 fadeOut 淡出 find

    83340

    前端开发JS——jQuery常用方法

    focusout 方法用于监听用户元素操作(如input元素),只有元素生效。...blur 方法用于监听用户元素操作(如input元素),只有元素生效。...有四种方式能触发submit事件: 、 、 、 当某些表单元素获取焦点时,敲击...13、jQuery键盘事件之keypress()事件 keydown事件触发在文字还没敲进文本框,这时如果在keydown事件输出文本框的文本得到的是触发键盘事件前的文本,而keyup事件触发时整个键盘事件的操作已经完成...如果提供了第二参数,那么事件往上冒泡的过程遇到了选择器匹配的元素,将会触发事件回调函数 就是说向上冒泡匹配到的元素,由该元素执行回调函数的范围 16、卸载事件off()方法 通过on()绑定的事件处理程序

    4.9K20

    前端如何防止数据被异常篡改并且复原数据

    ,实现每当此元素的内容发生改变,就触发 MutationObserver 的事件回调,并且通过一个数组,记录下每一次元素改动的结果。...接下的核心就在于我们应该如何去运用它们。 语雀这个例子,它的核心点在于: 它能够识别出内容的修改是常规正常操作,还是脚本、控制台修改等非常规操作。...,多存储一份当前的获元素信息,对比内容被修改时的页面获元素是否是当前输入框 尝试判断输入框的获状态,可以通过监听 foucs、blur 获及失事件进行判断 用户当文本内容改变时,是否有经过触发过键盘事件...数组 如果当前页面获元素与当前发生变化的 DOM 元素不是同一个元素,则认为是一次非法修改,记录两个标志位 isFixed 和 data_fixed_flag,此时继续向前寻找最近一次正常修改记录...isFixed 用于向前寻找最近一次正常修改记录后,将最近一次修改的堆栈信息进行保存 data_fixed_flag 标志位用于当元素被再次获时(触发 focus 事件),根据标志位判断是否需要回滚恢复数据

    32740

    Web 用户体验设计提升实践

    让动画持续时间保持 300ms 或更短。 看下图演示,同一个转场动画会被频繁触发,所以尽可能地让每次的动画不要持续过久,能够帮助用户节省更多时间。...页面上可以聚焦的元素,称为可聚焦元素,获得焦点元素,则会触发元素的 focus 事件。对应地,也会触发元素的 :focus 伪类。...有了这个伪类,当用户使用鼠标操作可聚焦元素时,就可以做到展示 :focus 样式或者让其表现较弱;而当用户使用键盘操作焦点时,利用 :focus-visible,让可获元素获得一个较强的表现样式。...我们实际的 WMS 重构过程,也会尽量保持这一点,让用户尽可能在非鼠标操作下(仅仅使用键盘),也能使用我们的页面,能做到基础的焦点切换、回车响应事件。...下图是一个简单的演示(仅仅使用键盘进行页面的操作,能够知道当前焦点在哪,可以回车触发点击): [ ] 3.3.2 使用 WAI-ARIA 规范增强语义:div 等非可获元素模拟获元素 还有一个非常需要注意的点

    1.2K20

    机器视觉(第3期)----图像采集之镜头原理详述

    因此,对于三个不同物距的物体同一个焦距的情况下得到的像距是不同的,如下图: ?...由于用于捕捉图像的传感器每个像素尺寸有一定的物理大小,因此如果模糊造成的弥散圆斑大小与像素尺寸差不多的时候,也可以认为是聚焦的。目前传感器尺寸的像素尺寸5~10μm之间。...同一个物体,物距越大,成像越小,而物距越小成像越大。然而这一特性,成为许多测量应用的一大障碍,因为测量行业,我们希望不同物距的相同物体通过镜头后的成像大小一致。...如果物体沿光轴移动到 A1B1 处,则像面 A1’B1’偏离 CCD 接收面,A1’和 B1’点在 CCD接收面上投影为一个弥散斑,其中心仍是 M1 和 M2 点,据此测出的像大小仍为M1M2,这样就消除了物距变化带来的测量误差...靠减小光圈并不能改善因场曲带来的模糊。因此某些专用照相机,故意将底片处于弧形位置,以减少场曲的影响。

    3K121

    使用 tabindex 配合 focus-within 巧妙实现选择器

    如果你对 CSS 是否存在选择器有疑惑,可以去看看 知乎 -- CSS 能否选取元素?...关于 :focus-within,不算太了解的可以先看看这篇文章:《神奇的选择器 :focus-within》 利用它,我们可以实现类似这样的功能,通过元素的子元素的获(focus事件),触发该伪元素... 事件,才能触发它或者它的元素的 :focus-within。... Windows 的 Safari 和 Firefox , 点击  元素,会触发  的 focus 事件,但在被目标元素捕捉到之后,不会继续向上冒泡。 什么意思呢?... Chrome 上的表现是正常,而在 Windows 的 Safari、Firefox 上,会触发 button 的 focus 事件,但不会触发元素的 :focus-within 事件,也就是上面说的

    1K10

    原生 JS DOM 常用操作大全

    parentNode //可以返回某个节点的节点,注意是最近一级的节点如果指定的节点没有节点则返回null × 子元素节点 parentNode.children (各个浏览器都支持) (包含...禁止鼠标右键菜单selectstart 禁止鼠标选中文字 只有同一个元素上相继触发 mouseover 和 mouseup事件 才会触发 click 事件 只有触发再两次 click 事件,才会触发一次...(e){ e.preventDefault(); //阻止事件的默认跳转行为 }) 焦点事件 blur 元素失去焦点触发 不会冒泡 focus 元素获得焦点触发 不会冒泡 键盘事件 一般键盘事件使用在...包括导致事件元素事件的类型以及其他与特定事件相关的信息。事件触发时系统会产生一个事件对象,并且系统会以实参的形式传给事件处理函数事件处理程序声明一个形参用来接收事件参数。 //1....e.target 指向的是事件触发元素 别忘了e.通常情况下e.target 和 this 的指向是一致的 注意:有一种情况不同,那就是事件冒泡时(父子元素有相同事件,单击子元素元素事件处理函数也会被触发执行

    10210

    vue封装带提示框的单选多选文本框组件

    组件的模板结构如下,通过show变量控制提示框的显示与隐藏,组件的输入框绑定聚焦和失事件: @focus="onfocus" 和 @blur="onblur",focus时设置变量show为true...,用户点击输入框外的选项元素必然会导致输入框失从而触发blur自动关闭,如下图所示。...对于多选,此时不应该关闭提示框,所有问题的关键在于如何实现点击提示选项而隐藏提示框。 ?...3.3 尝试方案3: 不使用blur,关闭方法改为事件委托 如果关闭不使用blur,而是通过点击事件手动触发,则不会存在上述时序问题,因此考虑使用全局事件委托,监听用户的点击事件,通过判断节点特殊class...**问题2:**阻止冒泡,如果组件的容器已经阻止了冒泡,则无法触发在body上绑定的关闭方法,需要针对容器单独处理。

    7.8K30

    前端优秀实践不完全指南

    这个时候,我们可以借助 object-fit,它能够指定可替换元素的内容(也就是图片)该如何适应它的容器的高宽。...页面上可以聚焦的元素,称为可聚焦元素,获得焦点元素,则会触发元素的 focus 事件,对应的,也就会触发元素的 :focus 伪类。...:focus 伪类不论用户使用鼠标还是使用键盘,只要元素,就会触发。...有了这个伪类,就可以做到,当用户使用鼠标操作可聚焦元素时,展示 :focus 样式或者让其表现较弱,而当用户使用键盘操作焦点时,利用 :focus-visible,让可获元素获得一个较强的表现样式。...上述操作全是键盘下完成,看着平平无奇,实际上组件库正常响应可获元素切换的同时,给用 div 模拟的 select 加了很多键盘事件的响应,可以利用回车,上下键等对可选项进行选择。

    86920

    使用 SetWindowCompositionAttribute 来控制程序的窗口边框和背景(可以做 Acrylic 亚克力效果、模糊效果、主题色效果等)

    如果指定 GradientColor 也就是保持为 0,你将看到上面绿色的部分全是黑色的;嗯,包括阴影的部分…… ---- 不使用 WindowChrome Windows 7 上: 可以看出...---- 使用 WindowChrome Windows 10 上,获得焦点的时候整个背景是系统主题色;而失去焦点的时候是灰色,但边框部分是深色。...亚克力效果相信大家陌生,那么 Win32 应用程序里面使用的效果是什么呢? ---- 不使用 WindowChrome, Windows 10 上: 咦!等等!这不是跟之前一样吗?...AccentState=ACCENT_INVALID_STATE 这个值其实不用说了,因为 AccentState 不同系统可用的值不同,为了保证向后兼容性,对于新系统设置的值,旧系统其实就视之为...主题色(失后边框为深色) ACCENT_ENABLE_BLURBEHIND 模糊特效(失后边框为灰色) ACCENT_ENABLE_ACRYLICBLURBEHIND 与 GradientColor

    1.4K60
    领券