背景：複選框內部有個數量增減選項，並且兩個都是change事件。當觸發內部數量增減事件時，外部的複選change事件也會觸發，體驗很不好。

使用事件 @click.stop.native.prevent 解決 (使用@click.stop 或者 @click.prevent都無效，直接報錯還阻止不了事件)

<el-checkbox-group
                    v-model="checked_list"
                    @click.http://www.cppcns.comstop
                    @change=checkedFn>
                <el-checkbox v-for="(item,inde
 
x) in listData" :label="index" :key="index" class="checkbox_shop_car">
                    <div class="shop_list">
                        <div><label>props_name:</label>{{item.props_name}}</div>
                        <div><label>型別:</label>{{item.name_suffix}}</div>
                        <div><label>數量:</label>
                            <el-input-number size="mini" v-model="item.number"
                                             @change="handl客棧
 
eChange(item)" :min="1" @click.stop.native.prevent></el-input-number>
                        </div>
                    </div>
                    <div @click="deleteFn(item.id)http://www.cppcns.com" class="delete_icon"></div>
                </el-checkbox>
            </el-checkbox-group>

效果

圖中綠色框和橙色框的change事件不會互相干擾，解決。。

沒有人能一路單純到底，但是要記住，別忘了最初的自己!

到此這篇關於解決change阻止預設事件問題的文章就介紹到這了,更多相關vue阻止事件內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！