天天看点

事件blur与click冲突

练习jQuery,写评论回复的网页时遇到的,

问题如下:

事件blur与click冲突

点击评论后,出现回复按钮,

事件blur与click冲突

点击按钮后,提交评论。若点其他地方,触发blur事件,回复按钮消失。但是此时无论怎么点回复按钮都不会触发click事件。

原因

javascript为单线程,同一时间只能执行处理一个事件,而blur事件比click优先,所以先触发了blur事件,但此时按钮已经消失,无法触发它click事件。

解决办法

方法一:

把click事件改为优先级比blur高的mousedown事件,缺点是用户体验不好,按下就会发表评论了。

方法二:

给按钮新增一个mousedown事件,事件里阻止浏览器默认事件,即

function(event){event.preventDefault()}
           

此时,点击按钮,则不会触发blur事件(没失去焦点,评论框仍处于获得焦点状态),而且click事件也被触发了。