900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > input中blur失去焦点事件与点击事件冲突

input中blur失去焦点事件与点击事件冲突

时间:2019-05-29 05:38:05

相关推荐

input中blur失去焦点事件与点击事件冲突

场景:

当在输入框里输入手机号的时候,输入框高亮,并且关闭按钮显示,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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。