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;//阻止默认事件(原生方法)
            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;

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

回答:

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

@blur="checkChineseName(event)"

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

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

希望对你有帮助

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

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

回答:

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

改成

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注