我当时场景是微信小程序,在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()