首页 > 代码库 > blur和click事件冲突
blur和click事件冲突
一、问题描述
文本框的blur事件和div元素的click事件出现冲突。
在input的blur事件中，我们隐藏div元素。
在div的click事件中，我们清除input的内容，并隐藏自身。
当我们在input中输入内容后，点击div，希望触发div的click事件，清除input的内容，并隐藏自身。不料先触发了input的blur事件，隐藏了div元素，导致无法完成div的click事件。
二、问题分析
出现上述问题，让人不得不去探索事件执行顺序。
A、在一个input文本框中绑定如下事件，测试执行顺序
onmouseover,onmouseenter,(onmousemove)onmousedown,onfocus,(onmousemove)onmouseup,onclick,(onmousemove)onkeydown,onkeypress,oninput,onkeyup,(onmousemove)onmouseout,onmouseleave,onchange,onblurB、在一个文本框和div标签中都绑定事件，测试执行顺序
【input】onmouseover,onmouseenter,(onmousemove)onmousedown,onfocus,(onmousemove)onmouseup,onclick,(onmousemove)onkeydown,onkeypress,oninput,onkeyup,(onmousemove)onmouseout,onmouseleave,【div】onmouseover,onmouseenter,(onmousemove)onmousedown【input】onchange,onblur【div】(onmousemove)onmouseup,onclick,(onmousemove)onmouseout,onmouseleaveC、mouseover和mouseenter的区别
不论鼠标指针穿过被选元素或其子元素，都会触发mouseover事件。
只有在鼠标指针穿过被选元素时，才会触发mouseenter事件。
三、解决方案
1、为blur添加延迟
dom_input.addEventListener(‘blur‘,function(e){ setTimeout(function () { dom_div.style.display = "none"; }, 200);},true);
让div延时隐藏，可以解决div无法被点击的问题。但设置多久的延时是一个难以两全的问题，时间太短不能保证click事件的100%触发，时间太长则会造成卡顿的感觉，影响用户体验。因此，设置延时并不是该问题的最佳解决方案。
2、blur事件的动态绑定
//鼠标进入div区域，取消文本框的blur事件绑定var fn = function(e){ dom_div.style.display = "none";} dom_div.addEventListener(‘mouseenter‘,function(e){ dom_input.removeEventListener("blur", fn, false);},true);//鼠标移出div区域，为文本框绑定blur事件dom_div.addEventListener(‘mouseleave‘,function(e){ dom_input.addEventListener("blur", fn, true);},true);
3、mousedown代替click
dom_input.addEventListener(‘blur‘,function(e){ dom_div.style.display = "none";},true);dom_div.addEventListener(‘mousedown‘,function(e){ dom_input.value =‘‘; dom_div.style.display = "none";},true);
blur和click事件冲突
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。