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

为什么在Chrome中会调用focusin事件两次?

在Chrome中调用focusin事件两次的原因是由于Chrome浏览器的事件冒泡机制。事件冒泡是指当一个元素触发了某个事件时,该事件会向上级元素逐级传递,直到传递到文档根节点。在这个过程中,如果父元素也绑定了相同的事件处理程序,那么该事件会被触发多次。

具体到focusin事件,它是在元素获得焦点时触发的事件。当一个元素获得焦点时,该事件会从最内层的元素开始触发,然后逐级向上冒泡。因此,如果父元素也绑定了focusin事件处理程序,那么在Chrome中就会出现调用两次的情况。

为了解决这个问题,可以使用事件委托的方式来处理focusin事件。事件委托是指将事件处理程序绑定在父元素上,通过事件冒泡的方式来处理子元素的事件。这样就可以避免在Chrome中调用两次focusin事件的问题。

另外,关于Chrome浏览器的事件冒泡机制和事件委托的具体实现方式,可以参考腾讯云提供的文档《JavaScript事件冒泡与事件委托》(https://cloud.tencent.com/developer/doc/1269)。

注意:本回答中没有提及亚马逊AWS、Azure、阿里云、华为云、天翼云、GoDaddy、Namecheap、Google等流行的云计算品牌商,以符合问题要求。

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

相关·内容

DOM事件第二弹(UIEvent事件

一、uitls.js(绑定事件公共类) var fixs = { 'focusin': { standard: 'focus', ie: 'focusin'...script元素上时,Ie不支持,需要用onreadystatechange事件来代替(error会作为一个状态来传递); script的error,ie上也是不支持的,也是通过onreadystatechange...失去焦点,不冒泡,遗留方案 3.1 代理事件的兼容处理方案 ie、opera、chrome等都支持focusin和focusout,但firefox不支持focusin和focusout。...3.3 代码触focusin事件 我们这里需要做一个兼容方案处理,现代浏览器下需要用focus来触发,因为我们绑定是focus事件。...,是属性值发生改变就会触发,如果我们一个动作导致两个属性值改变,就会触发两次: 1 <option

2.8K90

JavaScript的事件

缺点: 1)时差问题,用户可能会在HTML元素一出现在页面上就触发相应的事件,但当时的事件处理程序有可能尚不具备执行的条件。 2)这种扩展事件处理程序的作用域链不同浏览器中会导致不同结果。...addEventListener() 事件绑定 参数: 要绑定的事件名 作为事件处理的函数 布尔值:true捕获阶段调用事件处理程序;false冒泡阶段调用 removeEventListener...() 事件删除 参数: 要删除的事件名 作为事件处理的函数 布尔值:true捕获阶段调用事件处理程序;false冒泡阶段调用 例如: //事件绑定 var btn = document.getElementById...焦点事件 blur 元素失去焦点的时候触发 focus 元素获得焦点的时候触发,不支持冒泡 //IE支持 focusin 与focus等价,支持冒泡 focusout 与blur等价,支持冒泡 3...只有一个元素上相继发生mousedown,mouseup事件,才会触发click事件 dblclick 双击主鼠标按钮时触发.只有一个元素上相继触发两次click时间才会触发dbclick事件 mousedown

1.4K30

读Zepto源码之Event模块

读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 zepto1.2.0 准备知识 focus/blur 的事件模拟 为什么要对 focus...chrome59下, input 聚焦和失焦时,控制台会打印出如下结果: 'focus' 'focusin' 'blur' 'focusout' 可以看到,在此浏览器中,事件的执行顺序应该是 focus...> focusin > blur > focusout 关于这几个事件更详细的描述,可以查看:《说说focus /focusin /focusout /blur 事件》 关于事件的执行顺序,我测试的结果与文章所说的有点不太一样...如果存在事件代理,并且事件为 focus/blur 事件浏览器不支持 focusin/focusout 事件时,设置为 true , 捕获阶段处理事件,间接达到冒泡的目的。...,设置 autoRemove 为一个函数,这个函数句柄执行前,调用 remove 方法,将绑定在元素上对应事件解绑。

1.4K00

4-Jquery学习四-事件操作

应是selector的祖辈元素,selector触发的事件可以被其祖辈元素事件流中捕获,从而以"代理"的形式触发事件。...resize事件会在元素的尺寸大小被调整时触发。该事件常用于window对象(浏览器窗口)或框架页面。 此外,你可以为同一元素多次调用该函数,从而绑定多个事件处理函数。...事件绑定处理函数(可以绑定多个,触发时按照绑定顺序依次执行): focusin是支持冒泡的,当我们把鼠标光标放入文本框时,该事件冒泡传递到父元素p上,因此可以p元素上触发focusin事件。...", "3px"); } ); //触发所有p元素的focusin事件 //$ps.focusin( ); // 调用不带任何参数的focusin()函数,会触发每个匹配元素的focusin事件 20...例如:你一直按住A键,直到10秒钟后才释放,只会在释放按键的时候触发一次keyup事件。 但在这个过程中会触发许多次keydown事件(或keypress事件)。

4.4K90

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

,只有鼠标移除区域后才生效,处理事件的过程中会事件冒泡,这两个方法用法及其类似,所以这只介绍mouseover事件。...两者是很相似的,所以这只介绍focusin事件 方法一:$ele.focusin () focusin 无参,只是绑定一个事件函数里可以实现其他的绑定事件 方法二:$ele.focusin (handler...('呱唧_T_呱唧', fn) } a(); 注:focusin 强调元素聚焦;focusout强调元素失焦,无论是不是自身调用聚焦/失焦方法,都会执行函数里面有部分操作...两者是很相似的,所以这只介绍focus事件 方法一:$ele.focus () focusin 无参,只是绑定一个事件函数里可以实现其他的绑定事件 方法二:$ele.focus (handler(eventObject...当这两元素的文本被选中时会触发select事件 方法一:$ele.select () focusin 无参,只是绑定一个事件函数里可以实现其他的绑定事件 方法二:$ele.select (handler

4.8K20

关于 Chrome 浏览器中 onresize 事件的 Bug

写插件时用到了 onresize 事件反复地测试后发现该事件 Chrome 及 Opera(内核基本与 Chrome 相同,以下统称 Chrome)浏览器打开时就会执行,这种情况也许不能算作...Chrome 中会弹出两次 alert,而其它浏览器只会弹出一次 alert,因为 Chrome 浏览器打开时就执行了 onresize 事件。...所以现在要解决的问题就是如何让 init() 函数 Chrome 浏览器打开时只执行一次。 这个问题看似容易却很棘手。因为只有打开浏览器时才会有这个 bug,某种程度上属于无关紧要的问题。...,至少想要从根本上也就是 Chrome 浏览器打开时就禁止 onresize 事件是不可能的。...在这里还有一个小问题,我最初用的是高度对比,但是不知道为什么两个高度值存在偏差,大家可以将宽度改为高度测试一下,希望知道这个小问题的朋友告诉我。

96060

jQuery进阶前言

前言: 《jQuery入门》一文中,记录了jQuery选择器、属性与样式和DOM操作等内容,本文将对jQuery的事件以及Ajax相关知识点进行讲解。接下来就一起来学习一下。...5、focusin()和focusout()事件: focusin()是获取焦点事件。比如有一个输入框,要在该输入框输入文字,我们首先得用鼠标点一下该输入框,这就叫获取焦点。...focusout()相反,就是失去焦点,用法和focusin()类似。 二、表单事件: 1、blur()和focus(): 这两个就是处理表单焦点的事件,blur()是失去焦点,focus是聚焦。...类似的event.currentTarget : 事件冒泡过程中的当前DOM元素,等同于this。...它的调用格式如下: $.ajax([settings]) 其中参数settings为发送ajax请求时的配置对象,该对象中,url表示服务器请求的路径,data为请求时传递的数据,dataType

2.4K20

事件

如果上述showMessage方法页面最底部定义,而用户页面解析前点击了按钮,会引发错误。 (2)其作用域链不同浏览器中会导致不同结果。...boolean=true,捕获阶段调用事件处理程序;boolean=false,冒泡阶段调用事件处理程序。...事件 说明 blur 元素失去焦点时触发,不会冒泡 focus 元素获得焦点时触发,不会冒泡 focusin 元素获得焦点时触发,会冒泡 focusout 元素失去焦点时触发,会冒泡 当焦点从页面中的一个元素移动到另一个元素...,会依次触发下列事件: (1)focusout失去焦点的元素上触发; (2)focusin获得焦点的元素上触发; (3)blur失去焦点的元素上触发; (4)DOMFocusOut...需要注意的是,使用最新chrome51时,不能修改弹窗文字! ?

3.2K51

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

要解决这个问题,我们可以在用户光标离开输入框的时候,调用 window.scrollTo(0, 0) 来把页面滚动到跟视口顶部对齐,从而实现页面归位的效果。...那么现在问题就是要给表单中 4 个输入框全部加上 blur 事件,然后 handler 中调用 window.scrollTo。...原因经查是输入框的 blur 事件无法冒泡。 无法冒泡的解决方案 经过查询,发现 focus 和 blur 两个 DOM 事件规范中就是无法冒泡的。...而与之相类似的有另外 2 个事件 focusin 和 focusout 则是可以冒泡的。 网上一些文章提到 focusin 和 focusout 是 IE 浏览器才支持的一种 DOM 事件。...这里我们用 setTimeout 来解决: <input type="text" placeholder

3.3K10

事件循环是如何影响页面渲染的?

这些异步调用的实现都是事件循环,但根据插入的队列不同和取任务的时机不同他们的表现也不同。 尤其涉及与页面渲染的关系时。...调用栈被清空时意味着当前任务执行结束。 Task Queue 是事件循环的主要数据结构。...这时 Microtask Queue 只有一个 Microtask(Promise), 它执行的过程中会插入第二个 Microtask(Promise queued by Promise)。...setImmediate 意在让脚本有机会在 UA 事件和渲染发生后立即得到调用,从渲染的角度上类似于渲染之后调用的 requestAnimationFrame。...请参考: https://github.com/YuzuJS/setImmediate/blob/master/README.md 插入的任务会在每次渲染任务之前执行,因此等待渲染之后需要调用两次来插入到第二次渲染之前

1.1K30

JavaScript(十二)

HTML 中定义的事件处理程序可以包含要执行的具体动作,也可以调用在页面其他地方定义的脚本,如下: <input type="button" value="Click Me" onclick="showMessage...因为用户可能会在 HTML 元素一出现在页面上就触发相应的<em>事件</em>,但当时的<em>事件</em>处理程序有可能尚不具备执行条件 其次,扩展<em>事件</em>处理程序的作用域链<em>在</em>不同浏览器<em>中会</em>导致不同结果 最后,HTML 与 JavaScript...3 个参数: 要处理的<em>事件</em>名 作为<em>事件</em>处理程序的函数 一个布尔值 最后这个布尔值参数如果是 true,表示<em>在</em>捕获阶段<em>调用</em><em>事件</em>处理程序,如果是 false,表示<em>在</em>冒泡阶段<em>调用</em><em>事件</em>处理程序。...有以下 4 个焦点<em>事件</em>: blur: <em>在</em>元素失去焦点时触发 focus: <em>在</em>元素获得焦点时触发 <em>focusin</em>: <em>在</em>元素获得焦点时触发。...类似地,只有触发<em>两次</em> click <em>事件</em>,才会触发一次 dblclick <em>事件</em>。如果有代码阻止了连续<em>两次</em>触发 click <em>事件</em>,那么就不会触发 dblclick <em>事件</em>了。

2.9K20

2016.07 第3周 群问题分享

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都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。...但是Cookie也是不可或缺的:cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web storage仅仅是为了本地“存储”数据而生。

92580

深入学习 React 合成事件

函数中会通过实际触发事件的节点,去寻找到它的document节点,并且调用legacyListenToEvent函数来进行事件绑定 function legacyListenToEvent(registrationName...三个监听函数之一,但是最终触发事件调用的还是dispatchEvent事件。...为什么合成事件对象不能被保存下来,而需要调用特殊的函数才能保留? 合成事件是怎么创建出来的?...中会通过调用extractPluginEvents函数,在这个函数内通过targetInst这个fiber对象,从这个对象一直往上寻找,寻找有一样的事件绑定的节点,并且把他们的回调事件组合到合成事件对象上...(),但还是会导致另外一个React版本上绑定的事件没有被阻止触发,所以17版本中会事件绑定到render函数的节点上。

1K31

​React太劝退,通过anu学合成事件

最近刚好在改一个anu的bug,发现anu的合成事件实现的简单易懂。为什么不通过anu来学合成事件呢?...合成事件是什么、有什么用 合成事件是React浏览器原有捕获->目标->冒泡事件运行机制的基础上重新实现的一套事件运行机制。 为什么要在浏览器事件运行机制之上再重新造轮子呢?...比如在React中,表单组件的change事件的触发时机其实对标的是原生DOM中的input事件。 再比如在React中,focus事件是由原生DOM中的focusin与focusout实现的。...React中,不同事件的优先级不同。不同事件的event handler中触发的setState会以不同优先级执行。 合成事件的实现 以下实现的代码皆来自anu。...(),依次调用event handler,模拟冒泡流程 接下来我们以click事件举例: 调用addGlobalEvent('click')注册全局handler用于事件委托。

60930

jQuery源码解析之click()的事件绑定

一、事件委托 DOM有个事件流特性,所以触发DOM节点的时候,会经历3个阶段: (1)阶段一:Capturing 事件捕获(从祖到目标) 事件自上(document->html->body->xxx)...(2)阶段二:Target 目标 浏览器找到监听器后,就运行该监听器 (3)阶段三:Bubbling 冒泡(目标到祖) 事件自下而上(document->html->body->xxx)到达目标节点的过程中...,并通过jQuery.fn[ name ] = function( data, fn ) { xxx } 如果有参数,则是绑定事件调用 on() 方法; 没有参数,则是调用事件调用 trigger(...jQuery.on() 方法: //绑定事件的on方法 //源码5143行 //目标元素,类型(click,mouseenter,focusin,xxx),回调函数function(){xxx...注意下 if ( one === 1 ) 这种情况,是 $().one()on()里的具体实现,即调用一次on()后,就执行jQuery().off( event ),卸载事件

1.7K20

浅谈JavaScript的事件事件类型)

UI事件   UI事件的触发并不一定是由用户操作触发的,包括:load,页面完全加载后window上触发该事件、当所有框架都加载完毕时触发、当图片加载完毕时img上触发、当嵌入的元素加载完成时object...有6个焦点事件:blur事件,元素失去焦点时触发事件,不会冒泡;focus事件,元素获得焦点时触发,不会冒泡;focusin事件,元素获得焦点时触发,会冒泡;focusout事件,元素失去焦点时触发,会冒泡...当用户页面上由一个元素移动到另一个元素事件触发的顺序为:focusout事件失去焦点的元素上触发;focusin事件获得焦点的元素上触发;blur事件失去焦点的元素上触发;focus事件,...这个事件不冒泡,而且光标移动到后代元素上不会触发;mouseleave事件,在位于元素上方的事件移动到元素范围之外时触发;mousemove事件,鼠标元素内部移动时重复重复;mouseout事件鼠标指针位于一个元素上方然后用于将其移入另一个元素时触发...只有同一个元素上触发mousedown和mouseup事件,才会触发click事件。只有触发两次click事件,才会触发dbclick事件

1.8K50
领券