onBlur和onChange冲突解决方法

最新推荐文章于 2024-02-16 17:42:45 发布
最新推荐文章于 2024-02-16 17:42:45 发布
阅读量695 收藏
点赞数
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46787337/article/details/125902944
版权

简介

在这里插入图片描述
如上图，我想当点击xxx或yyy时将弹出层关闭，点击dom上的其他元素弹出层也关闭

于是我监听了xxx和yyy元素的onClick事件和input元素的onBlur事件

但是当我点击xxx或yyy时onBlur事件会先执行，导致xxx或yyy的onClick事件直接不执行

bug原因

onblur事件会比onclick事件先执行

解决方式

  1. 把onblur事件上的代码改成异步的形式，比如说加个setTimeout
  2. 不监听onClick事件而是监听onMouseDown事件这样你的事件将会下鼠标按下的那一刻就会执行
weixin_46787337
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS day11—事件
qq_48991522的博客
09-21 119
1.事件： 对某个元素的某种操作 事件三要素：事件元素，事件类型，事件对象（可有可无） 事件对象：当某个事件触发时产生的对象，就是事件对象。 event使用前提，必须有事件。不同的对象产生的事件不同。 事件对象的兼容写法： var e = evt || event 宏观事件分为鼠标事件和键盘事件。 2.鼠标事件对象的属性： 坐标属性： pageX / pageY 相对于整个文档（整个页面）顶部和左侧的坐标 clientX / clientY 相对于局部窗口（窗口）的左侧和顶部的..
OnFocus与OnBlur的例子区别
09-05
OnFocus与OnBlur的例子，大家可以运行下，看下区别。
onclick和onblur冲突问题的快速解决方法
01-19
新浪首页的搜索框里面有一个使用ajax的下拉框。我们需要实现一个点击下拉框里面的一项，让搜索框里面的值变成这一项，同时下拉框消失的效果，但同时在点击其他地方的时候，这个下拉框也要消失。大致如图： 我们同时使用onblur和onclick来使下拉框隐藏，但是更大的问题出现了，这两个功能相冲突，onblur过于强悍，根本没有onclick方法实现的机会，搜索框无法获取点击项的内容。这个就是我们想要解决的onclick和onblur冲突问题。 对应这个问题，这里我们介绍两种解决办法： 1. 使用setTimeout来使onblur时间延期执行，使onclick执行完后再执行onblur。（其中
JavaScript中的onblur（失去焦点）应用
最新发布
qiuqiule6的博客
02-16 1288
提示：onblur 相反事件为 onfocus 事件。ondblclick— 鼠标左键双击事件。onmouseover— 鼠标移入事件。onmouseout-- 鼠标移出事件。onmousemove— 鼠标移动事件。onmousedown— 鼠标按下事件。oninput---- 内容改变事件。onclick— 鼠标左键单击事件。onmouseup— 鼠标抬起事件。onkeydown— 键盘按下事件。onchange— 内容改变事件。onkeyup— 键盘抬起事件。onblur— 失去焦点事件。
onblur和onchange两者的区别
Idpd_的博客
01-10 300
onblur和onchange两者的区别
onblur和onchange
m0_68968100的博客
09-28 1150
onchange的一些案例
el-select下拉框同时使用@blur和@change
王也的博客
07-07 1206
需求：el-select选中选项时触发，失去焦点时也要触发代码如上，但change和blur会冲突，就是el-select原来的change事件失效了。
onblur 与onclick 冲突；onblur导致onclick事件丢失
alenejinping的专栏
06-30 502
onblur导致onclick事件丢失 onblur 与onckick 冲突
jquery阻止事件冒泡 避免子元素的onclick会触发父元素的onclcik
BabyTitanium的博客
11-29 1036
将一下代买写到子元素的onclick事件中                        var ev = window.event || arguments.callee.caller.arguments [0];             if（window.event）ev.cancelBubble = true;             else {                 ev...
Input 控件的Onchange 与onBlur 事件区别？
lmp5023的博客
03-12 2639
onchange 是指控件的值发生改变且失去焦点时触发的事件 onblur 是不管值有无改变，失去焦点就触发事件
文本输入框的change事件与确认按钮的click事件重复调用问题
qq_41756580的博客
10-18 1278
在日常编码中是否会遇到在编写一个输入组件时，我们需要用到文本框的change事件，又需要一个确认按钮的click事件，这两个事件调用的都是一个函数，这时输入完成后，点击确认事件就会调用两次函数，出现重复调用问题。 有的人会说，去掉change事件，或者去电确认按钮，但我认为两个都保留对于用户体验是很好的。 我的解决思路是给一个计数变量，之后使用setTimeout解除计数变量，这样可以避免同时...
Js中的onblur和onfocus事件应用介绍
10-26
html页面中，诸如按钮、文本框等可视元素都具有拥有和失去焦点的事件，本文以文本框获得和失去焦点为例简单讲解onfocus和onblur的应用
详解HTML onfocus获得焦点和onblur失去焦点事件
09-22
主要介绍了详解HTML onfocus获得焦点和onblur失去焦点事件的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
浅谈js中onchange、onkeydown、onpropertychange、onkeyup以及onblur的区别！
DeLongR的专栏
10-25 3277
最近项目开发中遇到onkeydown事件和onchange事件同时存在的时候onchange事件不起作用，特总结js中的onchange，onkeydown，onpropertychange，onkeyup和onblur的区别。          首先onchange和onkeydown不能共存的原因：比如在onkeyup="this.value=this.value.replace(/\D/
JavaScript：运用onblur()与onchange()事件处理前端页面动态传值问题
weixin_45860713的博客
07-04 2325
JavaScript：运用onblur()与onchange()事件处理前端页面动态传值问题 一、简要介绍 js中的onblur()事件可以处理文本输入框（input）失去焦点，进行值的改变； js中的onchange()事件可以处理下拉框（select），进行值的改变； 二、演示 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title>
onblur & onchange
weixin_30532759的博客
09-28 171
本文地址：http://www.cnblogs.com/veinyin/p/7606914.html 两者均可用于验证是否输入数据 onblur ： 表示不再是焦点，是 onfocus 的相反事件，只要该域不被 focus ( 失去焦点 ) 就会触发 onchange ： 表示域不再被选择且输入内容被改变，不可用于验证空域 END~~~≥ω≤ 转载于...
onchange、onpropertychange、oninput和onblur
Legend1988的专栏
11-16 5042
一、onchange发生有两个条件： 1、元素的属性（value）改变了； 2、元素失去焦点。 注：通过js修改元素的value不能触发onchange，只能通过键盘和鼠标修改的才有效。 二、onpropertychange是实时触发的，value（其他属性也可以，包括大小位置等）一旦改变，无论是通过键盘鼠标还是js改变都会触发，只适用于IE。 注：在IE9下无法响应退格键（Backsp
关于easyui的日期框onchange、onblur、onfocus、onproperty事件失效的解决办法。
CSDNZHENGHJ的博客
06-11 835
最近在做前端优化时碰到这么一个问题，填写完日期失去焦点后自动更新另一个输入框的日期，但是发现easyui的databox日期框不支持onblur事件的触发（日期框的改变并不会失去焦点），必须双击才可以触发事件，之后又试了类似的onchange、onfocus等，结果都是凉凉，着实很难受，最后在官方的文档中，找到了关于对于easyui的事件触发，下面分享给大家。 <td class="A"> <input name="dd" id="dd" class="easyu...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值