blur事件与click事件冲突的解决办法

 时间:2024-10-22 20:42:08

1、事件原因说明(1).blur 事件:当元素失去焦点时触发 blur 事件;早前,blur 事件仅发生于表单元素上。在新浏览器中,该事件可用于任何元素,blur 和 focus 事件不会冒泡,其他表单事件都可以。(2).click 事件:当点击元素时触发 click 事件;所有元素都有此事件,会产生冒泡。问题产生的原因:因为 blur 事件比 click 事件先触发,而 javascript 为单线程,同一时间只能执行处理一个事件,所以当 blur 执行时,导致其后续 click 事件并不会执行;

blur事件与click事件冲突的解决办法

3、解决方法二:将click事件改为mousedown事件,mousedown事件是优先于blur事件执行

4、解决方法三:给图标再添加一个mousedown事件,在其中执行event.preventDefault()阻止浏览器默认事件,这样点击按钮时输入框就不会失去焦点了

blur事件与click事件冲突的解决办法

6、小结:blur事件与click事件冲突的解决办法推荐使用方法三、方法四,对于用户交互体验会友善一点

  • 荣耀60指纹解锁在哪里
  • 华为手机怎么设置来信息亮屏
  • 华为智能助手的今日提醒帮你提升工作效率!
  • 媳妇是怎么炼成的
  • 怎样学习单片机
  • 热门搜索
    地铁2033攻略 奥利司他减肥药的危害 黑柳彻子简介 天台山旅游攻略 怎么练习英语听力 幼儿教师简介 大印象减肥茶 五一杭州旅游攻略 胡莱三国攻略 养生减肥