回车触发了Button的click事件(点击回车,结果调用了按钮的点击事件----解决办法)

方法1.

按钮点击后,执行失去焦点函数

复制代码
<el-button type="primary" @click="(e)=>clearPlatSearch(e)">清空搜索</el-button>
// 让button失去焦点
    clearPlatSearch(e){
      if(e){
        let target = e.target
        // 根据button组件内容 里面包括一个span标签,如果设置icon,则还包括一个i标签,其他情况请自行观察。
        // 所以,在我们点击到button组件上的文字也就是span标签上时,直接执行e.target.blur()不会生效,所以要加一层判断。
        if (target.nodeName === 'SPAN' || target.nodeName === 'I') {
          target = e.target.parentNode
        }
        // 让其失去焦点
        target.blur()
      }
    },

方法二:

@keyup.prevent.native @keydown.enter.prevent.native

复制代码
<el-button type="primary"  @keyup.prevent.native @keydown.enter.prevent.native @click="clear">清空搜索</el-button>
相关推荐
颜酱20 小时前
前端必备动态规划的10道经典题目
前端·后端·算法
wen__xvn20 小时前
代码随想录算法训练营DAY10第五章 栈与队列part01
java·前端·算法
大怪v21 小时前
前端佬们!!AI大势已来,未来的上限取决你的独特气质!恭请批阅!!
前端·程序员·ai编程
Mr -老鬼1 天前
功能需求对前后端技术选型的横向建议
开发语言·前端·后端·前端框架
qq_406176141 天前
关于JavaScript中的filter方法
开发语言·前端·javascript·ajax·原型模式
@@小旭1 天前
实现头部Sticky 粘性布局,并且点击菜单滑动到相应位置
前端·javascript·css
Eric_见嘉1 天前
NestJS 🧑‍🍳 厨子必修课(九):API 文档 Swagger
前端·后端·nestjs
北辰alk1 天前
2025:当Vibe Coding成为我的创意画布——一名前端工程师的AI元年记
前端·trae
jump_jump1 天前
SaaS 时代已死,SaaS 时代已来
前端·后端·架构
Yanni4Night1 天前
Parcel 作者:如何用静态Hermes把JavaScript编译成C语言
前端·javascript·rust