keyup事件与blur事件冲突解决

下图的一个需求,输入框输入后焦点离开input框就能自动生成一个标签,同时也要考虑回车键

生成标签

目前在blur事件绑定了方法A,keyup事件触发后调用了方法B,B中去调用方法A

存在的问题:

  • 可以看到方法A被触发了两次,即在keyup事件后又触发了blur事件
  • 虽然在Vue的setter中前后相同的值不会去触发更新,但是为了代码的逻辑优化美观,不写一些垃圾代码,必须得解决

解决办法:

  • 在keyup事件中手动去触发blur方法,比如:
ele.addEventListener('keyup', function (e) {
  e.keyCode === 13 && (e.target.blur())
})
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,548评论 1 11
  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 5,163评论 0 21
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,148评论 1 32
  • 本节介绍各种常见的浏览器事件。 鼠标事件 鼠标事件指与鼠标相关的事件,主要有以下一些。 click 事件,dblc...
    许先生__阅读 2,520评论 0 4
  • 总结: 鼠标事件 1.click与dbclick事件$ele.click()$ele.click(handler(...
    阿r阿r阅读 1,641评论 2 10