内容简介:问题:当焦点在输入框时,点击取消按钮会触发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 滑动冲突
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Search User Interfaces
Marti A. Hearst / Cambridge University Press / 2009-9-21 / USD 59.00
搜索引擎的本质是帮助用户更快、更方便、更有效地查找与获取所需信息。在不断改进搜索算法和提升性能(以技术为中心)的同时,关注用户的信息需求、搜寻行为、界面设计与交互模式是以用户为中心的一条并行发展思路。创新的搜索界面及其配套的交互机制对一项搜索服务的成功来说是至关重要的。Marti Hearst教授带来的这本新作《Search User Interfaces》即是后一条思路的研究成果,将信息检索与人......一起来看看 《Search User Interfaces》 这本书的介绍吧!