業(yè)務(wù)場(chǎng)景：el-input 是查詢關(guān)鍵詞的搜索輸入框烟很，其綁定了失去焦點(diǎn)事件浦译。 el-button是查詢按鈕。當(dāng)點(diǎn)擊查詢按鈕時(shí)溯职，目的是執(zhí)行查詢操作精盅，但出現(xiàn)bug，變?yōu)閳?zhí)行了el-input的失去焦點(diǎn)事件谜酒，沒有執(zhí)行searchHandle事件叹俏。
<el-input
? ? ref="searchInput"
? ? v-model="keywords"
? ? placeholder="請(qǐng)輸入查詢內(nèi)容"
? ? clearable
? ? @keyup.enter.native="searchHandle"
? ? @focus="inputFocusHandle"
? ? @blur="inputBlurHandle"
/>
<el-button type="primary" icon="el-icon-plus" @click="searchHandle">add</el-button>
思路： 在按鈕上綁定的事件從@click 改為 @mousedown 事件。因?yàn)槭ソ裹c(diǎn)事件是mousedown默認(rèn)觸發(fā)的僻族，所以粘驰，在點(diǎn)擊的按鈕上阻止mousedown的默認(rèn)事件即可
解決方案：
<el-input
? ? ref="searchInput"
? ? v-model="keywords"
? ? placeholder="請(qǐng)輸入查詢內(nèi)容"
? ? clearable
? ? @keyup.enter.native="searchHandle"
? ? @focus="inputFocusHandle"
? ? @blur="inputBlurHandle"
/>
<el-button type="primary" icon="el-icon-plus" @mousedown.native="searchHandle">add</el-button>
searchHandle(event){
? ? // 即可阻止點(diǎn)擊按鈕時(shí)觸發(fā)input失去焦點(diǎn)事件
? ? event.preventDefault();
}
vue中使用@mousedown、@mouseenter等鼠標(biāo)事件失效解決辦法
當(dāng) el-input 將@click替換為@mouseenter述么、@mousedown等鼠標(biāo)事件[非鼠標(biāo)點(diǎn)擊事件]時(shí)蝌数，發(fā)現(xiàn)事件不觸發(fā)（也就是失效了）
解決方案：在@mouseenter、@mouseenter等鼠標(biāo)事件后面加上native屬性
<el-button type="primary" icon="el-icon-plus" @mousedown.native="searchBtn">add</el-button>
