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

将某些元素排除为“focusout”事件的一部分

是通过使用事件委托和事件冒泡来实现的。当一个元素失去焦点时,会触发“focusout”事件,而这个事件会一直向上冒泡到文档树的根节点。通过在根节点上监听这个事件,可以捕获到所有失去焦点的元素,并进行相应处理。

在实际应用中,有时我们希望某些特定元素不触发“focusout”事件,比如弹出框、下拉列表等。这时可以通过判断事件的触发元素是否在排除列表中来决定是否执行相关逻辑。

以下是一个示例代码:

代码语言:txt
复制
// 以使用jQuery为例
$(document).on('focusout', function(event) {
  var excludedElements = ['#popup', '.dropdown']; // 排除列表,包含选择器或元素ID

  var targetElement = event.target; // 获取触发事件的元素

  // 检查触发元素是否在排除列表中
  var isExcluded = excludedElements.some(function(element) {
    return $(targetElement).is(element);
  });

  if (!isExcluded) {
    // 在这里编写触发失去焦点事件后的处理逻辑
    console.log('Element lost focus:', targetElement);
  }
});

在这个示例中,我们监听了整个文档的“focusout”事件。当触发事件时,首先获取事件的触发元素,并遍历排除列表,检查触发元素是否在其中。如果触发元素不在排除列表中,则执行相应的处理逻辑。

对于实际的应用场景,例如在一个表单中有一些输入框和一个下拉列表,当用户在输入框中输入内容并切换到下拉列表时,我们希望不触发输入框的“focusout”事件,可以将输入框的选择器或ID添加到排除列表中。

腾讯云相关产品:腾讯云云函数(Serverless Cloud Function)是一种无服务器计算服务,可用于构建和运行云端应用程序和服务。您可以使用云函数实现类似示例代码中的事件处理逻辑,并且无需关心服务器运维等问题。详情请参考腾讯云云函数

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

相关·内容

  • 【JS】310- 使用 focusout 事件,解决 iOS 键盘收起不归位问题

    此时,实际上页面顶部是离开了我们视口一部分距离(我们看到界面中消失了一行输入框)。 键盘收起时页面无法还原归位 然而当用户输入完成关闭键盘后,键盘虽然收起了,但页面位置却不会还原。...问题分析: 实际上这是由于 iOS 无法在键盘收起时,页面滚出视口部分没有掉下来导致。这时用户是可以通过手指页面拖回来。 但是毕竟体验不好。...事件代理: 即,我们把事件监听放到顶部元素上;然后定义一个 inputBlur 函数等待触发。...而与之相类似的有另外 2 个事件 focusin 和 focusout 则是可以冒泡。 网上一些文章提到 focusin 和 focusout 是 IE 浏览器才支持一种 DOM 事件。...: inputBlur(e) { // 首先,判断触发事件目标元素是否是input输入框,我们只关注输入框行为。

    3.4K10

    ipad上100vh和100%踩坑记「建议收藏」

    最近遇到了一个小bug,在ipad上编辑word文件虚拟键盘收回时,会导致页面的导航条隐藏,且页面的下面会出现一块空白 自己尝试解决方案 通过focusin和focusout对虚拟键盘弹入弹出进行监听...我理解是:focusin和focusout比较适合于监听对于文本输入框键盘事件。 通过比较screen.availHeight和screen.height进行比较。...另一种方法是:监听一个事件,比如我监听就是scroll事件,对会发生隐藏元素设置scrollIntoView或者scrollIntoViewIfNeeded,通过设置不同参数,可以使得作用元素与视口上面或下面对齐...我们看一下W3C文档怎么说 即,flex容器中绝对定位子元素会脱离flex布局流,也就是说flex: 1对子元素来说已经失效了。...因此他高度绝对定位中100%设置高度,但是又设置了overflow:hidden,因此才会在虚拟键盘隐藏时出现一部分空白,从而导致了导航条隐藏。

    1.2K10

    jquery鼠标事件

    click()   点击事件绑定一个事件处理函数,或者触发元素点击事件。   ...用法:     在页面上所有段落上触发click事件     $("p").click(); .dblclick()   双击事件绑定一个事件处理函数,或者触发元素双击事件。....focusout()   一个事件函数绑定到失去焦点事件上。   .focusout(handler)     handler       每次事件出发会执行函数。   ....focusout([eventData],handler)     eventData       一个对象,它包含数据键值对映射将被传递给事件处理程序。     ....hover()   两个时间函数绑定到匹配元素上,分别当鼠标指针进入和离开元素时被被执行。

    4.5K70

    2016.07 第3周 群问题分享

    而用div来模拟时,首先遇到问题是:div怎么实现输入功能? contenteditable 属性规定是否可编辑元素内容。...JavaScript focus/blur与focusin/focusout区别与联系 2016.07.18~2016.07.22 核心内容 focus/blur与focusin/focusout 问题解析...focus/blur不冒泡,focusin/focusout冒泡 focus/blur兼容性好,focusin/focusout在除FireFox外浏览器下都保持良好兼容性,如需使用事件委托,可考虑在...FireFox下使用事件流elem.addEventListener(‘focus’, handler, true) 可获得焦点元素: window 链接被点击或键盘操作 表单空间被点击或键盘操作 设置...但是Cookie也是不可或缺:cookie作用是与服务器进行交互,作为HTTP规范一部分而存在 ,而Web storage仅仅是为了在本地“存储”数据而生。

    93880

    梳理下常见不冒泡事件

    User shifts focus focusout 第一个目标元素失去焦点之前触发 focusin 第二个目标元素获得焦点之前触发 blur 第一个目标元素失去焦点之后触发 focus 第二个元素获得焦点之后触发...•blur 不冒泡 ❌•focus 不冒泡 ❌•focusin•focusout 要注意 blur 事件和 focus 事件都是不冒泡,因获取和失去焦点本身就是针对这个元素。...如果要坚挺具体焦点变化情况,那么应该使用 focusin 和 focusout Mouse 事件 如果元素内部没有嵌套另一个元素事件触发顺序见下表: Event Type Element Notes...直接移动到元素C,常见于失去焦点再获得焦点情况,事件触发顺序见下表: Event Type Element Notes mousemove 直接移动到元素C mouseover C mouseenter...❌ SSE 相关事件也是不冒泡 html5 drag & drop 或 touch 事件则是冒泡

    1.3K30

    滚动上报实现

    scroll 那还不简单,直接监听列表元素scroll事件,然后上报呗: $list.on('scroll', () => { let itemHeight = $list.find('li')....: scroll事件触发那么频繁,尽管加上节流也上报了很多次无用数据 首屏列表卡片曝光个数并没有上报,需要额外地手动触发一次scroll事件 beforeunload 为了避免不必要上报,我想只在页面卸载时候上报一次数据应该就可以了吧...但是依据MDNblur event文档,它是不冒泡,而如果要在列表元素上监听焦点相关事件,是需要在元素上增加tabIndex属性,在个别浏览器实现中,对于此种容器元素获取焦点会有边框特效,带来副作用...所以采用focusout事件是一个较为不错选择: let maxCount = 0; let reportedCount; // scroll to change maxCount......maxCount... } }); focusout事件兼容性还是不错,因为此需求只需要在QQ内嵌页中完成,所以并没有考虑到firefox兼容性,并且它是冒泡

    64320

    滚动上报实现

    scroll 那还不简单,直接监听列表元素scroll事件,然后上报呗: $list.on('scroll', () => { let itemHeight = $list.find('li')....: scroll事件触发那么频繁,尽管加上节流也上报了很多次无用数据 首屏列表卡片曝光个数并没有上报,需要额外地手动触发一次scroll事件 beforeunload 为了避免不必要上报,我想只在页面卸载时候上报一次数据应该就可以了吧...但是依据MDNblur event文档,它是不冒泡,而如果要在列表元素上监听焦点相关事件,是需要在元素上增加tabIndex属性,在个别浏览器实现中,对于此种容器元素获取焦点会有边框特效,带来副作用...所以采用focusout事件是一个较为不错选择: let maxCount = 0; let reportedCount; // scroll to change maxCount......maxCount... } }); focusout事件兼容性还是不错,因为此需求只需要在QQ内嵌页中完成,所以并没有考虑到firefox兼容性,并且它是冒泡

    90970

    DOM事件第二弹(UIEvent事件

    此文章主要总结UIEvent相关事件,如有不对地方,欢迎指正。...此节点应用于document节点上(但不能在document上绑定此事件),可以绑定元素:body、img、frame、frameset、iframe、link、script。...js对象:image、windows、layer(h5) unload 在页面或内容被移除时触发。元素:body、frameset;Js对象:window。...失去焦点,不冒泡,遗留方案 3.1 代理事件兼容处理方案 ie、opera、chrome等都支持focusin和focusout,但firefox不支持focusin和focusout。...4.1 区别与兼容性 oninput现代浏览器特性(ie9+都ok),只有改变控件value才会触发oninput,但js改变value不会触发oninput,并且oninput需要只能通过addEventListener

    2.8K90

    React 事件初探

    clickBubbleListeners['a.b.c'](event); clickBubbleListeners['a.b'](event); clickBubbleListeners['a'](event); 浏览器每个事件和每个...除Firefox浏览器外都可使用支持冒泡 focusin/focusout 来代替 focus/blur 事件,Firefox会在捕获阶段监听 focus/blur 事件。...submit/reset 事件会在鼠标点击或者按回车键时触发,所以可以监听冒泡 click 和 keypress 事件,并判断触发事件元素是否一个 form 元素后代节点,然后手动触发 submit...在Firefox v8.0浏览器下,如果作为top-level listener之一onmousemove事件不是挂载在document元素上,那么当鼠标在不是该节点或者该节点所对应子节点元素上移动时...根据不同浏览器对onmouseover事件、onscroll事件以及focusin、focusout事件支持情况不同,react进行了有针对性处理,以下为react事件系统跨浏览器执行部分代码实现

    1.7K00

    React事件初探

    clickBubbleListeners['a.b.c'](event); clickBubbleListeners['a.b'](event); clickBubbleListeners['a'](event); 浏览器每个事件和每个...除Firefox浏览器外都可使用支持冒泡 focusin/focusout 来代替 focus/blur 事件,Firefox会在捕获阶段监听 focus/blur 事件。...submit/reset 事件会在鼠标点击或者按回车键时触发,所以可以监听冒泡 click 和 keypress 事件,并判断触发事件元素是否一个 form 元素后代节点,然后手动触发 submit...在Firefox v8.0浏览器下,如果作为top-level listener之一onmousemove事件不是挂载在document元素上,那么当鼠标在不是该节点或者该节点所对应子节点元素上移动时...根据不同浏览器对onmouseover事件、onscroll事件以及focusin、focusout事件支持情况不同,react进行了有针对性处理,以下为react事件系统跨浏览器执行部分代码实现

    1.1K80

    React事件初探

    clickBubbleListeners['a.b.c'](event); clickBubbleListeners['a.b'](event); clickBubbleListeners['a'](event); 浏览器每个事件和每个...除Firefox浏览器外都可使用支持冒泡 focusin/focusout 来代替 focus/blur 事件,Firefox会在捕获阶段监听 focus/blur 事件。...submit/reset 事件会在鼠标点击或者按回车键时触发,所以可以监听冒泡 click 和 keypress 事件,并判断触发事件元素是否一个 form 元素后代节点,然后手动触发 submit...在Firefox v8.0浏览器下,如果作为top-level listener之一onmousemove事件不是挂载在document元素上,那么当鼠标在不是该节点或者该节点所对应子节点元素上移动时...根据不同浏览器对onmouseover事件、onscroll事件以及focusin、focusout事件支持情况不同,react进行了有针对性处理,以下为react事件系统跨浏览器执行部分代码实现

    79310

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

    handlerOut(eventObject):当鼠标指针离开元素时触发执行事件函数 7、jQuery鼠标事件之focusin与focusout事件 focusin 方法用于监听用户元素聚焦操作(如...focusout 方法用于监听用户元素失焦操作(如input元素),只有元素失焦后才生效。...;focusout强调元素失焦,无论是不是自身调用聚焦/失焦方法,都会执行函数里面有部分操作, 8、jQuery表单事件之focus与blur事件 focus 方法用于监听用户元素聚焦操作(如input...注:如果要阻止浏览器某些默认行为,可以传统调用事件对象e.preventDefault()来处理;也可以在函数上返回false 12、jQuery键盘事件之keydown与keyup事件 keydown...则是显示,如果false则是隐藏 3、jQuery中下拉/上卷动画之slideDown和slideUp方法(改变元素高度) 元素下拉显示方法slideDown()和上述show()很相似;元素下拉显示方法

    4.9K20

    JQ事件事件对象

    ,如果鼠标移入所选元素后代时,不会触发(增加阻止事件冒泡功能) <... 1  focus ()  :获得焦点事件     2  blur(): 失去焦点事件     3 focusin()  :获得焦点事件     4 focusout() :失去焦点事件     5...()和focusin() 区别   focusin可以在父元素上检测子元素获得焦点情况 而focusout可以在父元素上检测子元素失去焦点情况  四 其他事件   1 scroll()滚动滚动条时触发事件...1 event .type   描述事件类型        2 event.target  触发该事件DOM元素        3  event.currentTarget 在事件冒泡阶段中的当前DOM...event.whichevent.keyCode 和 event.charCode标准化了。推荐用event.which来监视键盘输入。

    4.1K20
    领券