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

Question

问题：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;//阻止默认事件（原生方法）
            event.stop;//阻止冒泡（原声方法）
            return
        }else if(!this.Val.isEngName(this.form.englishName)){
            this.$alert("请输入正确的英文姓名格式！");
            this.form.englishName = '';
            return;
        }
    },

找了几个网上的方法 一一试过，发现都不行
1、

event.preventDefault=true;//阻止默认事件（原生方法）
event.stop;//阻止冒泡（原声方法）

2、

@blur.stop="checkEnglishName(event)"

3、

event.cancelBubble = true;

这几个方法试过都不行。。。

Answer 1

这个跟阻止冒泡没关系吧，我觉得是你事件回调设计的不好，你再怎么阻止冒泡都会弹出来。

@blur="checkChineseName(event)"

你再怎么阻止冒泡，checkChineseName() 总还是会执行的吧？然后你在 checkChineseName() 里面又弹了框，当然就是现在的样子了。

如果你想要的是切换输入框的时候不弹框，提交表单的时候才弹框的话，就不要在 @blur 里弹框，而是在 form 的 submit 事件里弹框。

希望对你有帮助

P.S.你从网上看的第一种方法完全不对- -原生阻止冒泡应该是这样：

event.preventDefault();
event.stopPropagation();

Answer 2

this.$alert("请输入！");

改成

this.$message.error("请输入！");