内容简介:问题:当焦点在输入框时,点击取消按钮会触发blur和click事件,导致需要点击两次取消按钮才能关闭弹窗原因:这是因为blur事件比click事件先触发,而解决方案1:如果click事件比blur事件先触发就没有问题了,所以可以给blur事件延迟触发
问题:当焦点在输入框时,点击取消按钮会触发blur和click事件,导致需要点击两次取消按钮才能关闭弹窗
原因:这是因为blur事件比click事件先触发,而 javascript为单线程,同一时间只能执行处理一个事件 ,所以当blur处理程序时,导致其后续click事件并不会执行
var popover = document.getElementById('popover');
var input = document.getElementById('category-name');
var btn = document.getElementById('btn-cancel');
var error = document.getElementById('error');
解决方案1:如果click事件比blur事件先触发就没有问题了,所以可以给blur事件延迟触发
var timer;
input.onblur = function() {
timer = setTimeout(function() {
console.warn('onblur');
error.style.display = 'block';
}, 100);
}
btn.onclick = function() {
console.warn('onclick');
clearTimeout(timer);
error.style.display = 'none';
popover.style.display = 'none';
}
解决方案2:将click事件改为mousedown事件,让其优先于blur事件执行(缺点是用户体验不好,鼠标按下便触发了事件)
input.onblur = function() {
console.warn('onblur');
error.style.display = 'block';
}
btn.onmousedown = function() {
console.warn('onmousedown');
error.style.display = 'none';
popover.style.display = 'none';
}
解决方案3:给按钮添加一个mousedown事件,在其中执行event.preventDefault()阻止浏览器默认事件,这样点击按钮时输入框就不会失去焦点了
input.onblur = function() {
console.warn('onblur');
error.style.display = 'block';
}
btn.onmousedown = function(e) {
console.warn('onmousedown');
e.preventDefault();
}
btn.onclick = function() {
console.warn('onclick');
error.style.display = 'none';
popover.style.display = 'none';
}
以上所述就是小编给大家介绍的《js中blur和click事件的冲突》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- Hash冲突解决方法
- 依赖冲突时的解决方法
- git 通过 SublimeMerge 处理冲突
- RecyclerView 、ViewPager 左右滑动冲突
- git 如何更可靠地解决冲突?
- 处理 WebView 与 ViewPager 滑动冲突
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
程序员的自我修养
陈逸鹤 / 清华大学出版社 / 2017-5 / 49.00
程序员作为一个职业、也作为一个群体,正逐渐从幕后走向前台,并以他们自己的能力加速改变着世界,也改变着人们生活的方方面面。然而,对于程序员,特别是年轻程序员们来说,如何理解自己的职业与发展,如何看待自己的工作与生活,这些问题往往比那些摆在面前的技术难题更让他们难以解答。 这本书从一个成熟程序员、一名IT管理者的角度,以杂记的形式为大家分享关于国内程序员职业生涯、个人发展、编程中的实践与认知乃至......一起来看看 《程序员的自我修养》 这本书的介绍吧!