在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

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

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

問題:vue 如何組織冒泡事件?
bug:我先點擊了中文名這個輸入框后 快速點擊英文名這個輸入框,錯誤提示彈窗就會一直彈出來

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

圖片描述

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

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

2、

@blur.stop="checkEnglishName(event)"

3、

event.cancelBubble = true;

這幾個方法試過都不行。。。

回答
編輯回答
青瓷

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

@blur="checkChineseName(event)"

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

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

希望對你有幫助

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

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

改成

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