input框的onblur失焦事件与button的onclick点击事件冲突

最新推荐文章于 2024-08-16 14:37:03 发布
最新推荐文章于 2024-08-16 14:37:03 发布
阅读量1.4k 收藏
点赞数
分类专栏： 问题记录 前端 文章标签： javascript css html5 node.js reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/gkf6104/article/details/116919266
版权
本文介绍了一种解决onblur事件与onclick事件冲突的方法。在实际项目中，当点击button按钮时，可能会同时触发onblur事件，导致用户体验不佳。通过调整button的事件监听方式为onMouseDown，可以有效避免这一问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

问题

输入框，需要处理onblur事件与onclick事件，在项目中点击button按钮的时候同时也触发了onblur事件

解决方法：
经过一步步定位问题发现该问题，查找资料后进一步测试问题得以解决，将button的onclick事件更改为onMouseDown
在这里插入图片描述

input标签事件总结（vue、H5），获取焦点失去焦点实时监听事件
start_sea的博客
07-31 3万+
input标签事件总结（vue、H5） 一、在Html中input标签的相关事件写法： 1、onfocus（常用） input标签获取焦点事件 2、onblur（常用） input失去焦点事件（触发条件：先获取焦点，再失去焦点触发） 3、onchange input失去焦点并且它的value值发生变化时触发 4、oninput input框输入过程中value值改变时实时触发，及没输入一个字符都会触发 5、onclick input标签type="button"时的点击事件 6、onkeydown inpu
提示输入框功能blur事件与click事件冲突解决
ahq2018的博客
03-08 508
问题描述： demo大概模样: 搜索框中输入关键字, 下方弹出提示, 点击提示词条, 去往相应的词条页面(这里用alert代替); 而搜索框失去焦点时, 会隐藏下方的提示内容 代码如下: <body> <div class="container"> <input type="text" id="input" placeholder="输入关键字" /> <ul class="test" id="test"> <li&gt
form表单中的onblur事件
12-08
onblur事件，鼠标离开表单input框时触发的事件
onBlur事件
HI,我是小瑞！
09-22 1627
在脚本中使用onBlur事件01  02  03  04  05  06  07  OnBlur事件08  09  10  11  12  13  14  15  文件说明第12行使用onBlur事件，当用鼠标离开第二个文本框的时候，自动触发onBlur事件，弹出一个对话框。
input框的失去焦点事件onblur与下拉框的点击事件click冲突
qq_52937529的博客
02-28 1480
input框的失去焦点事件与列表的click事件冲突，导致未触发click事件
文本框input 添加onBlur、onkeyup 、onchange事件
weixin_39190732的博客
03-12 8879
onchange 在用于文本框输入框时,有一个明显的不足. 事件不会随着文字的输入而触发,而是等到文本框失去焦点(onblur)时才会触发. 也就是没有即时性! 且必须值变化才触发 onblur 与onchange基本相同，唯一的区别是 不管值是否变化，都触发 onkeyup 只要输入框内容发生变化即可触发，但是无法检测复制粘贴 附带方法，判断文本内容长度是否超限 function length...
onblur 与onclick 冲突；onblur导致onclick事件丢失
alenejinping的专栏
06-30 662
onblur导致onclick事件丢失 onblur 与onckick 冲突
JavaScript事件处理详解：onload、onclick与onblur示例
在给定的示例中，主要介绍了JavaScript中的几个常见事件，包括onload、onclick、onblur以及onsubmit。下面将详细讨论这些事件的使用及其重要性。 ### 1. `onload`事件 `onload`事件在网页或DOM元素完全加载后触发，...
html的DOM中Event对象onblur事件用法实例
09-03
在JavaScript中，`onblur`事件还可以与其他DOM事件（如`onclick`、`onfocus`等）结合使用，以实现更复杂的交互逻辑。例如，当一个元素获得焦点后，可以使用`onfocus`事件来改变其样式，而当它失去焦点时，通过`...
input按钮的事件处理大全
09-05
5. `onfocus` 和 `onblur`: 这两个事件与按钮的焦点有关，当按钮获得或失去焦点时触发，常用于表单验证或自定义输入提示。 在提供的示例中，使用了多种不同的操作，包括打开、保存、打印、页面设置等，这些都是通过...
.NET中input属性下onblur、onfocus、onclick事件所运用的区别
weixin_45802550的博客
06-10 1246
1、onblur事件 <input id="Text1" type="text" onblur="alert(111)" /></p> 例如一个文本框，当在文本框中输入完成某些值时，点击任意处便可触发该事件。可关闭。 2、onfocus事件 <input id="Text1" type="text" onfocu="alert(1)" ></p> 只要点击或者在该文本框中输入某些值便会不断地重复该事件。无法关闭。 3、onclick事件 <input
ant.design的input框同时绑定onBlur和onPressEnter事件且方法为同一个方法后的结果
sx_lz_1119的博客
08-03 4164
ant.design的input框同时绑定onBlur和onPressEnter事件且方法为同一个方法
使用onblur()事件校验多个input框的值是否为正整数(含0)
weixin_42704650的博客
09-04 1516
需求:用户需要填写多达15个input框的值,并且需要对所有的input框的值做整数校验 这里采用的是onblur事件,每当用户填写一个input框的值的时候,鼠标失去焦点时,都会对当前的input做校验 在每一个input添加onblur()事件: <input type="text" id="aaa" name="aaa" onblur="checkFormat(this)" clas...
js中让input 控件的onblur事件只触发一次
11-30 3039
 只让最新的input（text）控件触发onblur事件 先前触发过的控件不再触发onblur 也就是说一个input控件只触发一次onblur 生成它下面的一个inputHTML CODE: 无标题页 <!-- // -->
HTML中onblur事件的使用
技术研究中心
06-29 2026
在HTML中，onblur事件是指当元素失去焦点时触发的事件。失去焦点意味着用户从当前输入框或其他可输入元素转移到另一个元素上。例如，当用户在输入框中输入完内容后，点击页面的其他地方或按下Tab键切换焦点时，就会触发onblur事件。本文深入探讨了HTML中onblur事件的概念、基本语法及其在实际开发中的应用场景。通过使用onblur事件，开发者可以实现表单验证、用户交互优化和自动保存等功能，从而提升页面的交互性和用户体验。
php中input鼠标失焦触发事件,详解HTML onfocus获得焦点和onblur失去焦点事件
weixin_36218209的博客
04-14 737
HTML onfocus 事件属性定义和用法onfocus 属性在元素获得焦点时触发。onfocus 常用于 、 以及 .提示：onfocus 属性与 onblur 属性相反。注释：onfocus 属性不适用于以下元素：、、、、、、、、、 或 。实例当输入字段获得焦点时触发函数。此函数改变输入字段的背景色function setStyle(x){document.getElementById(x)...
小程序中，点击按钮或者图标，弹出输入框和键盘
Khoo5323的博客
03-24 5107
小程序中，点击按钮或者图标，弹出输入框和键盘
输入框blur和提交按钮事件冲突处理
IT小小酥的博客
07-23 1551
表单提交页面通常都需要做前端验证，有时不仅在提交按钮时需要验证一下表单内的内容，输入框失去焦点时也需要做验证处理。但是这样有一个bug，那就是人们可以输完后直接点击提交按钮，这样便会造成二次验证。 问题就是上面的描述，处理方法也是从网上找到的，不过忘记出处了。 处理的方法是利用timeout来解决，示例代码如下所示： /* 点击按钮时不触发input的blur事件 */ ...
对于react中input输入框中onBlur和点击输入框外部按钮冲突
最新发布
AndrewPerfect的博客
08-16 738
处理输入框的失焦事件时发现它影响了外部的提交按钮，这通常是因为失焦事件会触发。可以利用这个事件来确保按钮点击不会被。函数，最终导致无法触发外部按钮进行提交操作。事件来处理按钮点击。在点击按钮时，按钮的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值