【javaScript】探讨 监听input输入框的失去焦点事件与按钮点击事件执行的顺序问题
1.问题描述
在input输入框输入一段文字之后,点击发送按钮会发现,只触发了失去焦点事件,按钮点击事件并没有被触发,当再次点击按钮的时候,事件才会被触发,这明显不是我们想要的,我们来看看怎么解决
2.代码
<body><div id="divContainer"><input class="inTest" autofocus/><button class="btn-send">发送</button></div><script type="text/javascript">window.onload = function(){var inputText = document.querySelector(".inTest");var btn = document.querySelector(".btn-send");inputText.onblur = function(){alert("-----blur----");};btn.onclick = function(){alert("-----click----");}}</script>
</body>
3.效果图
4.解决办法
由于失去焦点事件发生的顺序在点击事件之前,这样我预期的触发点击事件的效果就达不到,为了达到触发点击事件,我在失去焦点时间里面加了setTimeout()方法,让失去焦点事件延迟300毫秒再触发,这样就调换了失去焦点和按钮点击事件的顺序,做到我所期待的效果
5.解决之后的代码
<body><div id="divContainer"><input class="inTest" autofocus/><button class="btn-send">发送</button></div><script type="text/javascript">window.onload = function(){var inputText = document.querySelector(".inTest");var btn = document.querySelector(".btn-send");inputText.onblur = function(){var timer = setTimeout(function(){alert("-----blur----");},300) };btn.onclick = function(){alert("-----click----");}}</script>
</body>
6.解决之后的效果图
【javaScript】探讨 监听input输入框的失去焦点事件与按钮点击事件执行的顺序问题相关推荐
- java监听焦点事件_监听input输入框的失去焦点事件与按钮点击事件执行的顺序问题...
1.问题描述 当在监听input失去焦点的事件的时候,在input输入框输入一段文字之后,点击发送按钮会发现,只触发了失去焦点事件,按钮点击事件并没有被触发,当再次点击按钮的时候,事件才会被触发 2. ...
- JavaScript 实时监听input 中值变化
JavaScript 实时监听input 中值变化 在 <input> 标签中,添加属性 oninput ,oninput 事件在元素获得用户输入时发生. 当 <input> ...
- js实时监听input输入框值的变化以便即使匹配搜索项
问题说明 在含有搜索框的网页中,经常需要及时匹配搜索项,因此需要监听input输入框的变化事件.如果使用 onkeydown.onkeypress.onkeyup 这个几个键盘事件来监测的话,除了监听 ...
- html 监听input输入框的值,利用原生JS实时监听input框输入值
利用原生JS实时监听input框输入值 原生JS中可以使用oninput,onpropertychange,onchange oninput,onpropertychange,onchange的用法 ...
- 实时监听input输入框value的变化:
HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件实时监听输入框value的变化 oninput 事件在用户输入时触发. 该事件在 <input&g ...
- 小程序中 input输入框上面定位的元素真机测试点击事件不生效
我在input输入框上 定位了一个元素 在模拟器上是正常的 在真机测试的时候 不行 先说出最后的解决方法吧 虽然是 通过定位 absolute 定位到 input输入元素上面的 忘记设置 它们之间的堆 ...
- 实时监听 input输入框值的变化 并响应动作
html <input type="text" id="id"> jquery $("#id").bind('input pro ...
- vue输入框输入触发事件_.vue文件中监听input输入事件oninput详解
.vue文件其实是一个组件,关于它的说明我之前也写过一篇文章,地址:.vue文件,今天这篇文章要讲的是.vue文件中监听input的输入值变化事件.需求是这页面中,改变input的值,就调用一个事件, ...
- angular监听输入框值的变化_angular 实时监听input框value值的变化触发函数方法
用angulajs + ionic 做了一个登陆页面.效果要通过监听输入框的变化来判断登陆按钮是否可点击.当至少一个输入框为空时登录按钮不可点击.一开始是用的jquery的方法做的,后来发现刷新当前页 ...
最新文章
- 深度解析:特斯拉的工厂为什么建造得这么快?
- 奔小康赚大钱 hdu 2255( KM )
- Multimap的遍历和删除(很重要)
- 查找出现次数超过一半的数
- 26. 删除排序数组中的重复项
- win7卸载python2.7_win7重装系统后设置Python2.7环境
- PS 菜单栏显示与隐藏 - 快捷键
- NDK 在 Android studio如何使用(Android studio NDK)
- java web排序商城_JavaWeb网上商城的反思
- 光盘放进电脑读不出来_U盘插入电脑读不出来?学会这3招,轻松解决USB无法读取的问题...
- linux 中写一个脚本 定时删除缓存任务,并创建相关文件,Linux使用shell脚本定时删除历史日志文件...
- VS编译器 :LNK链接错误汇总:LNK2001 / LNK2005 / LNK2019 / LNK1120
- 基于阿里云Aliddns动态域名解析的客户端PHP实现与服务器端(包含C与PHP)实现
- 大数据基础课18 数据中台:用大数据赋能业务
- c++十六进制加法_16进制数之间的加法
- tms sparkle创建server以及module实例
- java 爬虫爬取糗事百科热图图片
- 有才!IT界惊现文豪!
- python绘制积分函数_Python超越函数积分运算以及绘图实现代码
- 日语——动词的各种变形
热门文章
- 九妹儿第一次在同事面前亮相
- 梦魇java_[Java教程]魔鬼的梦魇—验证IE中的JS内存泄露模式(一)
- Python 数据采集、清洗、整理、分析以及可视化实战
- combobox onchange事件
- DSP TMS320F2803x、TMS320F2806x CLA开发笔记(代码基于TMS320F28069 详解)
- java嵌入式数据库之hsqldb、derby、h2
- 从一个小题中的应用来体会下std::tie的便利之处
- js给页面给某个id赋值_js 给元素id赋值
- python:保存N维数组(ndarray)到本地文件
- java变量默认值_Java变量的默认值和初始化