JS Onblur 与Onclick事件冲突的解决办法

最新推荐文章于 2025-06-06 09:17:29 发布
最新推荐文章于 2025-06-06 09:17:29 发布
阅读量9.6k 收藏 3
点赞数
CC 4.0 BY-SA版权
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/yelangshisan/article/details/78936220
本文探讨了在百度搜索框中输入检索词后出现的下拉列表与输入框的交互问题。具体而言，如何避免点击列表项时触发输入框的onblur事件导致列表消失。通过使用onmousedown替代onclick事件，可以有效解决此问题。

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

场景：百度的搜索框 输入检索字后下拉会有对应的列表出来，要求点击搜索框外的区域下拉列表消失，点击下拉列表的某个记录后跳转。实现方式为 input 的onchange+onblur 与列表的onclik 。这样就会存在一个问题，当点击列表时 input 的onblur就先发挥作用，导致列表的onclik无效（js的单线程限制了只允许一个事件触发，onblur的优先性高于onclick）.
解决办法：用onmousedown 代替onclick
onclick和onblur冲突问题的快速解决方法
09-02
下面小编就为大家带来一篇onclick和onblur冲突问题的快速解决方法。小编觉得挺不错的，现在分享给大家，也给大家做个参考
js怎么覆盖原有方法实现重写
12-12
在JavaScript中，重写或覆盖原有的方法是一种常见的实践，它允许开发者在不改变原代码的基础上扩展或修改功能。在给出的示例中，`myblur`函数被另一个匿名函数覆盖，实现了方法的重写。以下是关于JavaScript中如何...
JavaScript 解决 onblur 与 onclick 冲突
weixin_34082177的博客
03-18 237
<input type="text" onblur="function1" /> <input type="button" onclick="function2" value="保存" /> 上面的代码会出现一种问题：当点击按钮的时候，onblur 会执行，onblur 一般是用来检查文本框的内容，我们并不希望在点击按钮的时候执行，并且 onblur 会
掌握JavaScript的onfocus与onblur事件监听
最新发布
weixin_36074800的博客
06-06 1076
onfocus事件是当元素获得焦点时触发的事件。通常，这意味着用户已经点击了该元素，或者在输入字段中开始输入文本。在网页设计中，获得焦点并不限于输入字段；其他可交互元素如链接、按钮、甚至自定义控件都可以通过JavaScript来触发onfocus事件。要触发onfocus事件，用户行为是关键。例如，用户点击一个输入框，或者使用Tab键在表单元素间切换，触发的都是onfocus事件。除了直接的用户交互，还可以通过脚本代码设置或取消元素的焦点，比如会让id为myInput的元素获得焦点。
onclick事件和onblur事件冲突
weixin_30614109的博客
02-10 276
<input id="element1" type="text" onblur="function1" /> <div id="div2"><a id="element2" href="javascript:void(0)" onclick="function2">text</a></div> ... var function1 =...
onblur事件和click事件冲突
weixin_30799995的博客
06-23 424
在js中onblur事件的优先级click事件，所以同一个元素上绑定两个事件的时候，onblur事件会冲掉click事件。 解决方案：将click事件改成mousedown事件 转载于:https://www.cnblogs.com/wong-do/p/9217868.html...
input 的blur事件之后button的onclick事件不执行解决方案
weixin_34186950的博客
12-02 956
最近发现网页程序中有个BUG，就是在input标签输入框中输入完数据后，直接点击“取消” 按钮的时候、出现网页崩死的情况； 经过小主酸菜我，各种方法的尝试后，找到一个初步可以解决的方案，在这里分享给大家： 首先，分析一下原因：input标签直接离开后，触发的事件是input标签的blur事件；然后直接去点击了取消按钮，执行button事件。 由于js是单线程的所以就出现了问...
解决onclick与onblur事件冲突的两种方法
"本文主要探讨了在网页开发中遇到的onclick和onblur事件冲突的问题，以及如何通过两种方法解决这种冲突。" 在Web前端开发中，JavaScript事件处理是构建交互式用户界面的关键部分。onclick和onblur是两个常见的事件...
深入理解JavaScript基础与事件处理
3. **事件处理**：JavaScript使用事件处理程序响应用户在网页上的操作，如`onabort`, `onblur`, `onclick`等。这些事件处理程序使得网页具有交互性，当特定事件发生时，相应的脚本会被执行。例如，`onsubmit` 可用于...
onblur 与onclick 冲突；onblur导致onclick事件丢失
06-30 687
onblur导致onclick事件丢失 onblur 与onckick 冲突
onblur和onclick冲突的解决方法
RebootTang的博客
08-12 4683
场景：input输入框绑定onblur事件，input输入框的确认按钮绑定onclick事件。在点击确认按钮的的同时，input也失去了焦点，所以会触发onblur事件，并且onblur会优先于onclick执行。这就会导致按钮的onclick事件无法正确执行，解决办法有两种： 1.给onblur加settimeout, 然后onclick中cleartimeout。也就是说让onblur延迟一段...
JS DOM操作 函数 事件 阻止事件冒泡
weixin_30457881的博客
04-04 296
一 函数 1、字符串函数 s.tolowerCase( )； -- 变小写 s.toupperCase( )； -- 变大写 s.substr( 2, 8)； -- 截取 从索引2开始截取，截取8个字符长度 s.split( )； -- 指定字符分割，返回一个数组。 括号里放一个字符，按照这个字符分割s ...
常见的事件,onclick,焦点事件onblur,加载事件onload,键盘事件,鼠标事件,表单事件onsubmit
zhansan的博客
07-13 473
常见的事件,onclick,焦点事件onblur,加载事件onload,键盘事件,鼠标事件,表单事件onsubmit
事件绑定(onclick,onfocus,onblur)
jakelihua
12-01 2859
事件绑定,onclick,onfocus,onblur
onblur和onclick冲突
腾飞FLY
01-09 497
    文本框给定一个onblur事件，按钮给定一个onclick事件， 这样的话，当点击按钮之后，文本框失去事件触发，但是按钮的onclick事件却触发不了   原因如下： onclick 相当于 在某一元素上触发了 onmousedown（即鼠标按下）后 任然在该元素 上 触发了onmouseup（鼠标按键弹起）才触发 onclick;  对于某元素A 绑定了 click事件 并同...
【Jquery】关于失焦事件和点击事件发生冲突的解决办法
羊家虎口的博客
05-22 2212
关于失焦事件和点击事件发生冲突的解决办法
解决input中智能提示框onblur与onclick冲突的问题
weixin_30906701的博客
01-27 760
背景： 制作一个类似百度输入法的智能提示框， 其中当关键词输入进来时，会有智能提示展开，实际需求是当点击智能提示框的汉字时，输入框中自动补全并关闭智能提示, 当点击其他区域时,智能提示框自动隐藏，如下所示： 分析:点击用onclick事件触发获取的值,然后点击外框用失去焦点的方式解决 但实际出现效果是: 如果添加了失去焦点的方法,点击提示文本的时候,文字也会因为输入框失去焦点而被隐...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值