解决input的blur事件后button的click不执行的问题

我当时场景是微信小程序，在input中输入内容后，再点提交按钮，评论窗口隐藏了，但是提交的事件没有触发。

这里的要求是：

    1. input失去焦点时，需要评论窗口隐藏

    2. 点击提交按钮后，既要提交，也要隐藏评论窗口

当时的代码是：

<div class="actionArea" v-if="isComment">
  <input type="text" @blur="commentBlur" />
  <button @click="commentSubmit">提交</button>
</div>

// 评论框失去焦点，隐藏窗口
commentBlur() {
  this.isComment = false;
},

// 提交评论
commentSubmit() {
  console.log("评论成功")
},

 

后来，我想要一个点，应该是click事件的顺序是在blur的后面，然后试了一下

<input type="text" @blur="commentBlur" />
<button @click="click" @touchstart="touchstart">提交</button>

commentBlur() {
  console.log("blur")
},

click() {
  console.log("click")
},

touchstart() {
  console.log("touchstart")
},

先获取input焦点，再点击提交按钮，返回的结果是：

果然，click是在blur后面！

所以，解决办法就自然有啦，改成鼠标按下事件

<div class="actionArea" v-if="isComment">
  <input type="text" @blur="commentBlur" />
  <button @touchstart="commentSubmit">提交</button>
</div>

 

关于鼠标按下事件（手指触摸动作开始），我列出几个常用的：

微信小程序： touchstart

Vue： touchstart

原生JS： onmousedown

jQuery： mousedown()