如何解决输入框失焦事件与按钮点击事件冲突的问题

最新推荐文章于 2025-10-11 11:34:21 发布
转载 最新推荐文章于 2025-10-11 11:34:21 发布 · 1.4k 阅读 · 1 ·
CC 4.0 BY-SA版权
原文链接：https://blog.youkuaiyun.com/fifteen718/article/details/77429476
文章标签：

#js

本文介绍了解决失焦事件延迟问题的方法，包括设置延迟触发和将按钮的点击事件改为按下事件，这两种策略能有效改善用户体验并提高应用的响应速度。

方法1、通过给失焦事件设置延迟触发。

方法2、将按钮的点击（click）事件改为按下（mousedown）事件。

uniapp H5环境下blur和click冲突的坑与优雅解决方案 #uniapp #H5事件冲突 #blur优先级 #mousedown事件 #前端踩坑
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
08-16 159
如果你在uniapp H5 环境下遇到输入框 blur 和按钮 click 冲突的问题，可以直接把换成这样事件优先级就能压过 blur，解决掉 click 事件被吃掉的情况。💡补充在移动端（touch 事件环境）有时需要用来代替如果你的按钮有防抖/节流逻辑，要确保在 mousedown 也能正常工作PC 浏览器中，这种写法同样有效。
移动端输入框的失焦事件和按钮事件冲突
叮当的猫猫的博客
09-07 1591
2.使用@click 指令替代v-on:click，在按钮上使用@click，并在点击事件处理函数中使用setTimeout延迟执行失焦操作，这样可以确保按钮点击事件能够先执行，再执行失焦操作。原因出在，在移动端，当输入框获取焦点后，点击按钮不会触发输入框的失焦事件，这是因为移动设备上的软键盘和按钮点击事件会有冲突，为了解决这个问题，可以尝试以下几种做法。3.移动设备上的按钮点击使用v-on:rouchend事件代替v-on:click,因为touched事件在移动设备上触发时，输入框已经失去了焦点。
input框的失去焦点事件onblur与下拉框的点击事件click冲突
qq_52937529的博客
02-28 1650
input框的失去焦点事件与列表的click事件冲突，导致未触发click事件
如何解决react-native中TextInput失去焦点触发事件和按钮点击事件冲突的问题
最新发布
诚实可靠小郎君的博客
10-11 321
在React Native中，当TextInput获取焦点后点击按钮可能导致按钮事件无法触发。解决方法是在ScrollView中添加keyboardShouldPersistTaps="handled"属性。该设置可以保持键盘状态，同时允许按钮正常响应点击事件。官网建议在包含TextInput的场景下使用此选项。示例代码展示了如何将TextInput和按钮包裹在ScrollView中并设置该属性，从而解决焦点冲突问题。
失去焦点与点击事件冲突
chenjy123456的博客
01-14 3071
在自定义select样式情况下，由于焦点事件会在点击事件之前先执行，如果在失去焦点事件设置时间延时，在体验上还是有点差距，所以我提供了另一个思路。 思路：判断鼠标点击坐标是否在自定义select范围内，不在范围内则执行失去焦点逻辑。（使用jquery） // 模拟select失去焦点事件 $("body").on("click", function(event){ var x =
input的失焦事件和click事件冲突问题
Object_prototype的博客
01-23 1675
自己个人遇到在手机端遇到问题 问题一 描述：在input输入框得焦的状态下，点击button的click事件时，页面执行了blur（虚拟键盘消失），而没有执行click事件 原因：因为blur优先级大于click，所以导致click没执行，要再点击才执行 解决方法就是使用下面笔记的方法二 这样就可以优先执行mousedown 再执行blur事件 问题二： 描述：在input输入框得焦的状态下，点击（div）绑定的（click或mousedown ），事件（请求接口的事件） 笔记： 网上找的答案一共
js blur失焦事件与click点击事件冲突
m0_37378152的博客
03-02 3535
场景：输入框绑定blur失焦事件，focus后点击按钮，触发了输入框的blur事件，但是按钮点击事件没有触发。 原因：blur失焦事件的优先级比click点击事件高。 解决方法： 1.都触发 blur事件里添加延时 blurEvent () { setTimeout(() => { // }, 200) } 2.不想触发blur，只触发click （1）定义一个flag，click事件设置flag为true （2）blur事件里添加延时，判断flag为
解决Js先触发失去焦点事件再执行点击事件的问题
10-18
在本案例中，通过在blur事件中加入延时处理（使用setTimeout函数），可以解决点击事件被提前触发的问题。具体做法是，在blur事件处理函数中使用setTimeout延迟执行移除清除按钮的操作，给用户留出足够的时间完成点击...
输入框失焦事件
09-17
当输入框的失焦事件与点击事件冲突时，可采用以下方法解决： - 在 `blur` 的回调函数中添加定时器 `setTimeout`，延迟 `blur` 回调函数的执行时间。这样在点击其他元素时，虽然输入框的 `blur` 行为先被触发，但由于...
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
10-21
本文主要介绍在使用jQuery处理`input`元素的`blur`事件与其他非表单元素的`click`事件时出现的冲突，以及如何解决这些问题。 ### 知识点一：blur事件和click事件的基本概念 - **blur事件**：在Web开发中，`blur`...
【解决方案】如何解决输入框失焦事件与按钮点击事件冲突的问题
热门推荐
Kuroko's Development Notes
08-20 1万+
直接上代码（demo可直接拷贝运行）：   <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="http:/
input中blur失去焦点事件与点击事件冲突的解决方法
出雲无心的博客
11-04 2265
解决的办法: 第一步：在blur的回调函数中加一个定时器setTimout，延迟blur回调函数的执行时间，这样的话虽然在点击div的时候，input的blur行为先被触发，但是由于加了定时器延迟，所以得等到按钮的click回调执行完成后才能执行input的blur行为的回调； 第二步：将click事件改成mousedown事件，因为mousedown行为是鼠标点下去的时候就被触发，而click行为是鼠标点下去再抬起的时候才被触发。 ...
搜索框input失去焦点事件和结果列表li的click事件冲突问题
heyNewbie的博客
06-09 1528
开发过程中，会经常遇到搜索需求，这就会涉及到input搜索框，外面还会有ul、div等搜索列表， 需要点击input外部进行操作时，收起或者隐藏搜索结果列表，首先我们会考虑到失去焦点来做 这就会有问题，点击事件和blur事件的先后执行 方法一：用setTimeout做的延迟隐藏（有小bug） 测试发现当鼠标点击并没有抬起是，会执行blur事件，（如果能接受的话） 我具体查了一下 blur事件，当元素失去焦点时触发的事件，为表单事件，blur和focus事件不会冒泡，其他表单事件都可以
input失去焦点事件和点击事件冲突的解决思路
weixin_43333600的博客
02-14 3571
input失去焦点事件和点击事件冲突，注意mouseleave 事件不支持冒泡 。 mouseout 父元素内如果有子元素，鼠标离开子元素且未离开父元素，也会触发mouseout
JavaScript_input框中失去焦点事件和点击事件冲突的解决办法
QiuRenBB的博客
09-07 1万+
前言：   在开发的过程中，我们经常会有搜索的需求，其中就涉及到的知识点就包括了今天我们要说的两个重要“角色”，input框和展示列表的li。 需求：   当我们在input框中输入内容时，展示列表能够渲染出模糊查找到对应的内容。这时，当input框失去焦点的时候，我要让展示列表隐藏或消失，而且我还想点击对应的展示列表中的li时，能够将对应li的值赋值给input。 问题：   那么问题来了，当我点击li的时候，也就意味着input失去了焦点，我还没有选中并拿到li中的值给input，展示列表就先一步隐藏或
【Jquery】关于失焦事件和点击事件发生冲突的解决办法
羊家虎口的博客
05-22 2225
关于失焦事件和点击事件发生冲突的解决办法
blur事件与click事件的冲突
从入门到放弃_nys的博客
05-10 3515
定义： blur事件：当元素失去焦点时发生 blur 事件 click事件：当单击元素时，发生 click 事件 在开发中会发现存在以下场景，点击当前输入框以外的其他元素。此时输入框失焦触发blur事件，同时我们点击的元素触发了click事件。这时候，你会发现blur事件是优先于click事件的。 在开发中，遇到了两次，一次是输入框blur与单选click，一次是输入框blur与下拉框click。 简化例子如下： //输入框失焦触发事件1，点击单选元素触发事件2。 $('#form_wrap').on('b
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值