场景:
当在输入框里输入手机号的时候,输入框高亮,并且关闭按钮显示,input失焦时关闭按钮隐藏
现象:
遇到的问题是,当我们点击关闭按钮清空input框数据时,发现只是关闭按钮隐藏了,数据并没有清空
方案:
经过debugger和查阅资料得出结论:输入框input的blur事件与关闭按钮的click事件的冲突了,在click的时候会先触发blur事件,没有触发click
原因:
由于JavaScript为单线程,同一时间只能执行处理一个事件。“blur优先于click执行”。而在本示例中,由于blur处理程序,会将对关闭按钮隐藏,导致后续关闭按钮的click事件并不会执行。
解决方案1:setTimeout
setTimeout:对blur事件进行延迟,让click先执行。
$(".tel-input").on({blur:function() {setTimeout(function(){$(".tel-close").hide();},0)}})$(".tel-close").click(function(){$(".tel-input").val('');})
解决方案2:mousedown 事件
给按钮click事件替换为 mousedown 事件,优先于blur事件执行,并在其中 event.preventDefault()
$(".tel-close").mousedown(function(event) {event.preventDefault()});
当我们点击按钮的时候,文本框失焦,这是浏览器的默认事件。当你点击按钮的时候,会触发按钮的 mousedown 事件,mousedown 事件的默认行为是使除了你点击的对象之外的有焦点的对象失去焦点。所以要在 mousedown 事件中阻止默认事件
其执行顺序为:mousedown >> click
如果觉得《input中blur失去焦点事件与点击事件冲突》对你有帮助,请点赞、收藏,并留下你的观点哦!