解決input的blur事件後button的click不執行的問題
阿新 • • 發佈:2018-11-22
我當時場景是微信小程式,在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()