vue如何阻止冒泡事件呢

Question

    <el-checkbox style="width: 100%;height: 45px" v-for="(element,index) in formThead" :key="index" :label="element.value" @change="test1()">
                                <el-slider v-model="element.width" :max="200" style="margin-bottom: -30px;margin-left: 100px;width: 450px" show-input @change.stop="test2()" ></el-slider>
                                {{element.label}}
                            </el-checkbox>

我el-checkbox里面放了一个el-slider 怎么才能阻止冒泡事件呢 网上搜的stop不起效

应该怎样写呢？

Answer 1

最后意外的解决了

在el-slider外层套了一层label 这样就不会出发check-box所在label的事件了

    <el-checkbox-group v-model="formTheadData"  >

                    <draggable v-model="formThead" >

                        <el-checkbox style="width: 100%;height: 45px" v-for="(element,index) in formThead" :key="index"
                                     :label="element.value" @change="test1">

                            <label>

                                <el-slider v-model="element.width" :max="200" style="margin-bottom: -30px;margin-left: 32%;width: 400px"  show-input @change="test1"></el-slider>

                            </label>
                            {{element.label}}

                        </el-checkbox>



                    </draggable>

                </el-checkbox-group>
                

感谢@zhanggy 问题确实出在label上，并不是事件冒泡

Answer 2

问题在这里
在label中

这个应该不好改，还是自己造一个轮子吧

Answer 3

show-input 设为 false 吧, 这个 change 事件是里面的 input 产生的原生事件, el-slider 上的 change 事件是自定义事件, 不存在事件传播.