input回车触发事件_多好的交互:enter、blur触发相同事件,为啥enter就走了2次

解决2次回调

<el-input 
v-model="input" 
placeholder="请输入内容"
@keyup.enter.native="getList"
@blur="getList"
>
</el-input>

「背景」：想开开心心敲代码，没料到一不小心又写了个bug。。。正常的动作就是：每次blur时，如果值有变更就提给咱后段大佬计算一下，然后重新刷新列表。不过输入框多了，摸鼠标的次数就多了，咱用户就变得莫名烦躁了、、、加个回车提交吧！！！然后上面的bug应用而生呀～每次回车都会提交2次请求，被敏锐的大佬给发现了，，，别说我开始还真没注意，不过很快意识到还真是的。

「原因」：每次enter的时候提交一次，此时鼠标失去焦点又触发了blur一次，2次没跑

「思路」：enter后我不调用了，直接走blur吧！

@keyup.enter.native="$event.target.blur"

修改后

<el-input 
v-model="input" 
placeholder="请输入内容"
@keyup.enter.native="$event.target.blur"
@blur="getList"
>
</el-input>

尝试其他姿势

• 如果enter绑定为空呢，会继续走blur吗？不会

@keyup.enter.native=""

为啥要使用$event啊，我使用e.target.blur不行吗？

• 姿势一：这样行吗？不行，e是undefined

@keyup.enter.native="e.target.blur"

• 姿势二：这样行吗？不行，e是undefined

@keyup.enter.native="enter(e)"


methods: {
    enter(e) {
      console.log(e)
      e.target.blur()
    }
  }

• 姿势三：这样行吗？不行，e还是undefined

@keyup.enter.native="enter(1, e)"


methods: {
    enter(val, e) {
      console.log(e)
      e.target.blur()
    }
  }

• 姿势四：这样可以！

@keyup.enter.native="e => enter(e)"


methods: {
    ...
  }

• 姿势五：这样可以！

@keyup.enter.native="enter"


methods: {
    ...
  }

• 姿势六：这样可以！

@keyup.enter.native="enter($event)"


methods: {
    ...
  }

• 姿势七：这样也可以～

@keyup.enter.native="enter(1, $event)"


methods: {
    ...
  }

知其所以然

姿势四、五、六、七解决原理相同，主要是使用vue.js特殊变量$event，官网文档可找到，如下图

其他箭头函数等写法都是小细节，虽然文中使用了e，但它其实就是$event