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

最新推荐文章于 2024-04-20 15:25:58 发布
最新推荐文章于 2024-04-20 15:25:58 发布
阅读量9.5k 收藏 3
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yelangshisan/article/details/78936220
版权
场景：百度的搜索框 输入检索字后下拉会有对应的列表出来，要求点击搜索框外的区域下拉列表消失，点击下拉列表的某个记录后跳转。实现方式为 input 的onchange+onblur 与列表的onclik 。这样就会存在一个问题，当点击列表时 input 的onblur就先发挥作用，导致列表的onclik无效（js的单线程限制了只允许一个事件触发，onblur的优先性高于onclick）.
解决办法：用onmousedown 代替onclick
唐僧经常不洗头
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
onclick和onblur冲突问题的快速解决方法
09-02
在网页交互设计中，事件处理是关键的一部分，`onclick` 和 `onblur` 是两个常见的JavaScript事件。`onclick` 事件在用户点击元素时触发，而 `onblur` 事件则在元素失去焦点时触发。在某些场景下，如本文所描述的新浪...
老生常谈onBlur事件与onfocus事件(js)
10-21
下面小编就为大家带来一篇老生常谈onBlur事件与onfocus事件(js)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
解决Js中onclick和onblur冲突
RemixGdc的博客
07-26 1272
使用setTimeout来使onblur时间延期执行，使onclick执行完后再执行onblur。（其中setTimeout的时间设定应该在100ms以上，否则依旧不行）    oText.onblur=function(){         timer=setTimeout(function(){           oUl.style.display='none';         ...
onblur 与onclick 冲突；onblur导致onclick事件丢失
alenejinping的专栏
06-30 532
onblur导致onclick事件丢失 onblur 与onckick 冲突
onblur和onclick冲突的解决方法
最新发布
weixin_55209970的博客
04-20 209
input输入框绑定onblur事件，input输入框的发送按钮绑定onclick事件。在点击发送按钮的的同时，input也失去了焦点，所以会触发onblur事件，并且onblur会优先于onclick执行。也就是说让onblur延迟一段时间再执行，在这一段时间内onclick会正常执行，并且onclick中的cleartimeout会停止onblur的执行。2.查阅资料 我看还有一种解决方式 将onclick替换为onmousedown 因为我这是h5页面 所以使用touchend。
JavaScript 解决 onblur 与 onclick 冲突
weixin_34082177的博客
03-18 181
<input type="text" onblur="function1" /> <input type="button" onclick="function2" value="保存" /> 上面的代码会出现一种问题：当点击按钮的时候，onblur 会执行，onblur 一般是用来检查文本框的内容，我们并不希望在点击按钮的时候执行，并且 onblur 会
input 的blur事件之后button的onclick事件不执行解决方案
weixin_34186950的博客
12-02 882
最近发现网页程序中有个BUG，就是在input标签输入框中输入完数据后，直接点击“取消” 按钮的时候、出现网页崩死的情况； 经过小主酸菜我，各种方法的尝试后，找到一个初步可以解决的方案，在这里分享给大家： 首先，分析一下原因：input标签直接离开后，触发的事件是input标签的blur事件；然后直接去点击了取消按钮，执行button事件。 由于js是单线程的所以就出现了问...
【Jquery】关于失焦事件和点击事件发生冲突的解决办法
羊家虎口的博客
05-22 2104
关于失焦事件和点击事件发生冲突的解决办法
onblur事件和click事件冲突
weixin_30799995的博客
06-23 377
在js中onblur事件的优先级click事件，所以同一个元素上绑定两个事件的时候，onblur事件会冲掉click事件。 解决方案：将click事件改成mousedown事件 转载于:https://www.cnblogs.com/wong-do/p/9217868.html...
Js中的onblur和onfocus事件应用介绍
10-26
JavaScript中的`onfocus`和`onblur`事件是网页交互中的关键部分，它们主要用于处理用户与HTML表单元素之间的交互，如按钮、文本框等。这两个事件与元素的焦点状态紧密相关。 一、`onfocus`事件 `onfocus`事件在用户...
【JavaScript源代码】JavaScript onblur与onfocus事件详解.docx
12-28
JavaScript onblur与onfocus事件详解 　html页面中，诸如按钮、文本框等可视元素都具有拥有和失去焦点的事件，这些事件在响应鼠标或键盘动作时都可激发预设的操作。本文以文本框获得和失去焦点为例简单讲解onfocus和...
js blur失焦事件与click点击事件冲突
m0_37378152的博客
03-02 3109
场景：输入框绑定blur失焦事件，focus后点击按钮，触发了输入框的blur事件，但是按钮点击事件没有触发。 原因：blur失焦事件的优先级比click点击事件高。 解决方法： 1.都触发 blur事件里添加延时 blurEvent () { setTimeout(() => { // }, 200) } 2.不想触发blur，只触发click （1）定义一个flag，click事件设置flag为true （2）blur事件里添加延时，判断flag为
js事件——点击事件与失焦事件冲突解决
weixin_33924770的博客
05-09 2519
前端菜鸟，哈哈哈，在练习的过程中，遇到了事件冲突问题，并通过薅头发的方法得以解决，希望通过和大佬们进行讨论，学习一下是否有更好的解决方法 问题 如豆瓣搜索框，在搜索时，会显示一个下拉列表，这个时候如果点击搜索框外面，会触发blur事件，下拉列表隐藏；如果点击下拉列表，则会跳转到相应的页面，在练习过程中，这个环节出了一些问题，我的部分代码如下 $('input').on('blur',funct...
js 触发 onblur事件
zzq123686的专栏
02-11 1392
如何在js代码模式通过代码触发input控件的onBlur事件
onclick和onchange不能一起执行
aolei_vcf的专栏
05-10 2670
onclick和onchange不能一起执行 onchange==》onpropertychange
onclick 和 onchange一起使用时，onchange没反应
罗格的博客
10-28 1391
正常使用来讲，两者并不会冲突，都能触发。而我导致onchange没反应是使用laydate.js插件时遇到的问题 <div id="zdySbTime"> <input type="text" placeholder="请输入日期" id="startTime" name="startTime" class="laydate-icon" onclick="laydate
JavaScript：运用onblur()与onchange()事件处理前端页面动态传值问题
weixin_45860713的博客
07-04 2342
JavaScript：运用onblur()与onchange()事件处理前端页面动态传值问题 一、简要介绍 js中的onblur()事件可以处理文本输入框（input）失去焦点，进行值的改变； js中的onchange()事件可以处理下拉框（select），进行值的改变； 二、演示 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title>
2个input都绑定了blur触发弹窗事件，导致死循环
rqk0324的博客
10-21 434
解决办法，在2个input来回切换 不触发弹窗，通过 document.activeElement 判断当前激活的元素是input。
js onblur事件使用当前触发元素的数据
06-09
在 JavaScript 中，可以使用 onblur 事件来处理元素失去焦点的情况。当一个元素失去焦点时，会触发该元素上的 onblur 事件。可以在该事件处理程序中访问当前触发事件的元素，并获取该元素的数据。下面是一个示例代码： ``` <input type="text" id="myInput" onblur="myFunction()"> <script> function myFunction() { var input = document.getElementById("myInput"); var value = input.value; // 处理元素失去焦点的代码，可以使用 value 变量来访问输入框的值 } </script> ``` 在上面的代码中，当文本输入框失去焦点时，会触发 myFunction 函数。该函数中首先使用 document.getElementById 方法获取输入框的元素，然后使用 value 属性来获取输入框的值。你可以在该函数中编写处理元素失去焦点的代码，并使用 value 变量来访问输入框的值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值