blur事件与click事件冲突怎么解决

解决click与blur事件冲突
最新推荐文章于 2024-05-21 11:41:36 发布
原创 最新推荐文章于 2024-05-21 11:41:36 发布 · 815 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了在前端开发过程中，click事件与blur事件发生冲突的问题，并提供了一种解决方案：将click事件替换为mousedown事件。文章还提出了对于这两种事件交互行为差异的好奇，留待后续深入研究。
今天遇到一个问题  一个文本框输入内容的时候会显示一个列表 失去焦点时列表消失 列表中的数据点击时 内容显示到文本框中  但是点击列表数据的click事件与input的blur事件冲突 没有执行  后来把列表的click事件改成mousedown就可以了  但是mousedown为什么跟blur不冲突  而click就冲突呢？先留个疑问吧  以后遇到问题可以换种方法就可以解决 至于原理  以后深究
Javascript blur与click冲突解决办法
10-20
主要介绍了Javascript blur与click冲突解决办法的相关资料,在开发过程中经常会遇到blur与click 冲突的情况，这里举了几个例子，和解决办法，需要的朋友可以参考下
快速解决js开发下拉框中blur与click冲突
11-23
在开发中我们会经常遇到blur和click冲突的情况。下面叙述了开发中常遇到的“下拉框”的问题，并提供了两种解决方案。 一、blur和click事件简述 blur事件：当元素失去焦点时触发blur事件；其为表单事件，blur和focus...
如何解决blur事件与click事件冲突
weixin_30401605的博客
05-24 440
如果在标签上绑定blur事件，很有可能在click其他标签时，造成click事件没有被触发，原因是因为blur事件先于click事件触发而造成click事件失效。解决方案是blur事件加一个延迟效果； 1 $("input").on('blur',function(){ 2 setTimeout(function () { 3 //do something 4 ...
blur事件与click事件的冲突
从入门到放弃_nys的博客
05-10 3513
定义： blur事件：当元素失去焦点时发生 blur 事件 click事件：当单击元素时，发生 click 事件 在开发中会发现存在以下场景，点击当前输入框以外的其他元素。此时输入框失焦触发blur事件，同时我们点击的元素触发了click事件。这时候，你会发现blur事件是优先于click事件的。 在开发中，遇到了两次，一次是输入框blur与单选click，一次是输入框blur与下拉框click。 简化例子如下： //输入框失焦触发事件1，点击单选元素触发事件2。 $('#form_wrap').on('b
【Js】输入框blur与按钮click冲突问题
最新发布
smart_dream
05-21 1000
而blur事件优先于click事件，导致其后续click事件并不会执行。其为表单事件，blur和focus事件不会冒泡，其他表单事件都可以。mousedown事件：当鼠标指针移动到元素上方，并按下鼠标按键时，会发生mousedown事件。解决方案2：将click事件改为mousedown，让其优先于blur事件执行。解决方法：将删除功能的click事件，替换为mousedown事件，问题解决。出现问题：点击删除，会先执行blur事件，不执行click事件。输入框使用blur事件，删除使用click事件。
vue项目中blur和click事件冲突
qq_39085895的博客
02-04 3845
blur和click事件 blur事件：当元素失去焦点时触发blur事件；其为表单事件，blur和focus事件不会冒泡，其他表单事件都可以。 click事件：当点击元素时触发click事件；所有元素都有此事件，会产生冒泡。 因为JS是单线程，同一时间只能处理一个事件，且blur执行顺序优先click。 介于此我用了简单粗暴的方法，将click事件换成了mousedown事件 其实还有其他方法，这篇博文里讲述的比较详细些【解决blur与click冲突】 ...
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
11-22
这两种方法都能有效地解决input的blur事件与div的click事件之间的冲突，确保在点击div时能够正确获取和处理input中的内容。在实际项目中，可以根据具体需求和场景选择合适的方法。在进行此类问题的调试和解决时，...
解决blur与click冲突
Zhu_daye的博客
06-24 1336
在开发中我们会经常遇到blur和click冲突的情况。下面叙述了开发中常遇到的“下拉框”的问题，并提供了两种解决方案。 一、blur和click事件简述 blur事件：当元素失去焦点时触发blur事件；其为表单事件，blur和focus事件不会冒泡，其他表单事件都可以。 click事件：当点击元素时触发click事件；所有元素都有此事件，会产生冒泡。 示例1：blur事件为表单事件 <input type="text" id="tel"> <script> documen..
解决blur和onclick冲突问题
笨小孩
11-14 6707
场景：如下图所示，当点击X按钮时，会同时触发blur和onclick事件，此时不需要执行blur事件中代码，只执行onclick事件中代码。 代码示例： &lt;html&gt; &lt;head&gt; &lt;script src="http://code.jquery.com/jquery-2.1.4.min.js"&gt;&lt;/script&gt; &lt;script type...
浅谈blur与click冲突的问题
筱葭的博客
12-30 5541
blur事件：当元素失去焦点时触发。 click事件：当点击元素时触发。
js 失去焦点和点击事件同时触发，第一个事件有请求，第二个事件依赖第一个事件的回执状态。两个事件都可独立执行。个人记录
liujuyingxiong的博客
03-04 881
第一个事件。用一个变量接收promise,请求结束变量置空 第二个事件，判断变量是否为promise，还是promise 就.then 执行。 不是就直接执行。
失焦事件blur和点击事件click不能同时执行问题
u012685222的博客
05-15 4097
覆盖地址input的当有内容输入，下方出现标准地址列表 $(".js_input").on("input propertychange keypress", function() { ｝ 如果点击列表中一个地址，列表隐藏，同事把地址填在input内 $("#addrList").on("click","li",function(){ $("#communit...
解决input的blur事件后button的click不执行的问题
mossbaoo的博客
11-09 3529
我当时场景是微信小程序，在input中输入内容后，再点提交按钮，评论窗口隐藏了，但是提交的事件没有触发。 这里的要求是：     1. input失去焦点时，需要评论窗口隐藏     2. 点击提交按钮后，既要提交，也要隐藏评论窗口 当时的代码是： &lt;div class="actionArea" v-if="isComment"&gt; &lt;input type="tex...
事件blur与click冲突
胖胖的博客
10-19 588
练习jQuery，写评论回复的网页时遇到的， 问题如下： 点击评论后，出现回复按钮， 点击按钮后，提交评论。若点其他地方，触发blur事件，回复按钮消失。但是此时无论怎么点回复按钮都不会触发click事件。 原因 javascript为单线程，同一时间只能执行处理一个事件，而blur事件比click优先，所以先触发了blur事件，但此时按钮已经消失，无法触发它click事件。 解决办法 方法一...
js blur失焦事件与click点击事件冲突
m0_37378152的博客
03-02 3532
场景：输入框绑定blur失焦事件，focus后点击按钮，触发了输入框的blur事件，但是按钮点击事件没有触发。 原因：blur失焦事件的优先级比click点击事件高。 解决方法： 1.都触发 blur事件里添加延时 blurEvent () { setTimeout(() => { // }, 200) } 2.不想触发blur，只触发click （1）定义一个flag，click事件设置flag为true （2）blur事件里添加延时，判断flag为
js、jquery 中 blur事件和click事件冲突
zy18729286306的专栏
12-09 9670
问题说明： 在表单验证中，我们往往会在输入框失去焦点时触发一个blur事件，但当失去焦点后点击了一个按钮，这时blur事件和click事件就都触发了，由于js是单线程的所以就出现了问题，现在需要让blur先执行验证，然后在触发click事件。 解决方法： 给按钮的click事件设置延迟执行setTimeOut(fn,100)，延迟时间的设置要大于blur事件的执行时间，这样就会在blur
提示输入框功能blur事件与click事件冲突解决
ahq2018的博客
03-08 545
问题描述： demo大概模样: 搜索框中输入关键字, 下方弹出提示, 点击提示词条, 去往相应的词条页面(这里用alert代替); 而搜索框失去焦点时, 会隐藏下方的提示内容 代码如下: <body> <div class="container"> <input type="text" id="input" placeholder="输入关键字" /> <ul class="test" id="test"> <li&gt
输入框blur事件与click事件冲突问题
weixin_44646763的博客
07-06 1067
这个现象我在写项目的时候出现有几次了，但一般都没反应过来，以为是代码写错了而没触发方法。 例如下面，这是之前做的一个vue项目出现的问题： 打印的时候发现blur方法执行了，但列表的点击事件没有执行。 原因：其实这是事件间的执行优先级问题，blur的优先级比click高，所以blur事件先执行了且把列表隐藏了，列表就没有触发click事件咯 解决方法： 1、改用其他事件优先级可以比blur高的事件 2、使用setTimeout延时器 hiddenList(){ setTimeout(() =
关于 blur 与 click 事件
qq_38476088的博客
03-20 753
去年有做一个需求，是关于表格校验的，有遇到了blur 和 click  事件冲突的问题当blur和click事件同时进行时,blur事件会优先于click 事件,导致click事件失效解决方案  将click修改为 mousedown  事件 或者在blur 事件发生时获取当前 dom元素  是否为发生点击事件的dom元素,是的话,则不执行后面操作...
解决onclick与onblur事件冲突的两种方法
"本文主要探讨了在网页开发中遇到的`onclick`和`onblur`事件冲突的问题，以及如何通过两种方法解决这个问题。在新浪首页的搜索框实例中，使用`onclick`事件来更新搜索框内容并隐藏下拉框，而`onblur`事件则用于在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值