鍍金池/ 問答/HTML/ vue,element @blur事件如何阻止冒泡事件？

vue,element @blur事件如何阻止冒泡事件？

問題：vue 如何組織冒泡事件？
bug：我先點(diǎn)擊了中文名這個(gè)輸入框后 快速點(diǎn)擊英文名這個(gè)輸入框，錯(cuò)誤提示彈窗就會(huì)一直彈出來

<el-form-item label="中文名" prop="chineseName">
    <el-input v-model="form.chineseName" @blur ="checkChineseName(event)" :maxlength="10" placeholder="請(qǐng)輸入中文名字"></el-input>
</el-form-item>
<el-form-item label="英文名" prop="englishName">
    <el-input v-model="form.englishName" @blur="checkEnglishName(event)" :maxlength="30" placeholder="請(qǐng)輸入英文名"></el-input>
</el-form-item>
     checkChineseName(event){
        if(this.isEmpty(this.form.chineseName)){
            this.$alert("請(qǐng)輸入中文名！");
            return
        }else if(!this.Val.isChnName(this.form.chineseName)){
            this.$alert("請(qǐng)輸入正確的中文姓名格式！");
            this.form.chineseName = '';
            return;
        }
    },
    checkEnglishName(event){
        if(this.isEmpty(this.form.englishName)){
            this.$alert("請(qǐng)輸入英文名！");
            event.preventDefault=true;//阻止默認(rèn)事件（原生方法）
            event.stop;//阻止冒泡（原聲方法）
            return
        }else if(!this.Val.isEngName(this.form.englishName)){
            this.$alert("請(qǐng)輸入正確的英文姓名格式！");
            this.form.englishName = '';
            return;
        }
    },

圖片描述

找了幾個(gè)網(wǎng)上的方法 一一試過，發(fā)現(xiàn)都不行
1、

event.preventDefault=true;//阻止默認(rèn)事件（原生方法）
event.stop;//阻止冒泡（原聲方法）

2、

@blur.stop="checkEnglishName(event)"

3、

event.cancelBubble = true;

這幾個(gè)方法試過都不行。。。

回答
編輯回答
青瓷

這個(gè)跟阻止冒泡沒關(guān)系吧，我覺得是你事件回調(diào)設(shè)計(jì)的不好，你再怎么阻止冒泡都會(huì)彈出來。

@blur="checkChineseName(event)"

你再怎么阻止冒泡，checkChineseName() 總還是會(huì)執(zhí)行的吧？然后你在 checkChineseName() 里面又彈了框，當(dāng)然就是現(xiàn)在的樣子了。

如果你想要的是切換輸入框的時(shí)候不彈框，提交表單的時(shí)候才彈框的話，就不要在 @blur 里彈框，而是在 form 的 submit 事件里彈框。

希望對(duì)你有幫助

P.S.你從網(wǎng)上看的第一種方法完全不對(duì)- -原生阻止冒泡應(yīng)該是這樣：

event.preventDefault();
event.stopPropagation();
2018年1月25日 17:55
編輯回答
笨尐豬
this.$alert("請(qǐng)輸入！");

改成

this.$message.error("請(qǐng)輸入！");
2018年2月19日 08:36