vue如何解决click和blur冲突的问题啊

Question

<input @blur="checkName"/>
  <button @click="submitform">提交</button>

填完input信息直接点击提交，会触发blur 需要再点击一次提交才会触发submitform事件 如何解决啊

Answer 1

button按钮用touchstart事件代替click，这样两个方法都可以一起触发，但是touchstart事件会比blur先执行

Answer 2

首先，blur比onClick优先级高，那么blur里面验证，如果验证通过，就会继续执行onClick，如果验证不通过，将验证结果给onClick，在onClick里直接return.如果是异步验证，请使用async await

Answer 3

你这么理解，什么情况失去焦点呢？ 就是你的input失去焦点的时候，所以你离开的时候点击了提交的按钮你可以不要写 @blur 可以点击submitform的时候，获取到input的输入值&nbsp;&nbsp;&nbsp;<input&nbsp;v-model="Input_box"/>&nbsp;&nbsp;<button&nbsp;@click="submitform">提交</button> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data(){&nbsp;&nbsp;&nbsp;return{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Input_box:"" &nbsp;&nbsp;&nbsp;} },&nbsp;methods:{ &nbsp;&nbsp;&nbsp;&nbsp;submitform(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(this.Input_box); &nbsp;&nbsp;&nbsp;&nbsp;} }

Answer 4

这个跟vue有毛关系？你点击按钮肯定是失去焦点了啊我这里直接触发2个事件的啊！<input&nbsp;@blur="checkName"&nbsp;v-model="val"/> <button&nbsp;@click="submitform">提交</button>var&nbsp;vm&nbsp;=&nbsp;new&nbsp;Vue({ &nbsp;&nbsp;&nbsp;&nbsp;el:&nbsp;".vueBox",&nbsp;&nbsp;&nbsp;&nbsp;data:&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;val:'',&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;methods:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;checkName(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(1111111,this.val); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;submitform(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(222,this.val); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;} });要不然你改<input&nbsp;@keyup="checkName"&nbsp;v-model="val"/>