解决vue change阻止默认事件问题

背景：复选框内部有个数量增减选项，并且两个都是change事件。当触发内部数量增减事件时，外部的复选change事件也会触发，体验很不好。

使用事件 @click.stop.native.prevent 解决 (使用@click.stop 或者 @click.prevent都无效，直接报错还阻止不了事件)

<el-checkbox-group
                    v-model="checked_list"
                    @click.stop
                    @change=checkedFn>
                <el-checkbox v-for="(item,index) 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="handleChange(item)" :min="1" @click.stop.native.prevent></el-input-number>
                        </div>
                    </div>
                    <div @click="deleteFn(item.id)" class="delete_icon">×</div>
                </el-checkbox>
            </el-checkbox-group>

效果

图中绿色框和橙色框的change事件不会互相干扰，解决。。

没有人能一路单纯到底，但是要记住，别忘了最初的自己!

到此这篇关于解决vue change阻止默认事件问题的文章就介绍到这了,更多相关vue阻止事件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 解决VUE框架 导致绑定事件的阻止冒泡失效问题

    前面遇到了一个问题就是VUE框架内部做了一些处理,使得在我们通过v-for渲染DOM的时候添加新元素的时候,绑定事件也能对新增的元素有效. 而这次遇到的问题则是,原本绑定事件中(该函数没有写在vue实例的methods中),导致阻止冒泡事件失效了.无论是return false 还是event.stopPropagation();都无效. 此时需要通过用VUE提供了事件修饰符来处理,比如阻止事件冒泡@click.stop='xx()' .stop .prevent .capture .self

  • vue click.stop阻止点击事件继续传播的方法

    如下所示: <div id="app"> <div v-on:click="dodo"> <button v-on:click="doThis">阻止单击事件继续传播</button> </div> </div> <script> var app = new Vue({ el: "#app", data: { name: "Vue.j

  • 重新认识vue之事件阻止冒泡的实现

    冒泡的表现 近期用vue做了一个需求,大概是同一个区域,点击不同位置有不同的响应函数,还有个总的响应函数,好吧,如下图所示: 他们的DOM结构如下: <div v-for="(item, index) in listData" @click="handleClick3"> <el-col :span="grid"> <div @click="handleClick1"></div>

  • vue 遮罩层阻止默认滚动事件操作

    在写移动端页面的时候,弹出遮罩层后,我们仍然可以滚动页面. vue中提供 @touchmove.prevent 方法可以完美解决这个问题 <div class="dialog" @touchmove.prevent ></div> 如果不是使用Vue的话,可以给body添加overflow:hidden属性解决 补充知识:vue项目中禁止页面滚动 / 滚动事件穿透 (弹出蒙版时,弹出层下面还可以滚动) vue项目中弹出层时,蒙版下还可以滚动页面. 移动端解决方案

  • 解决vue change阻止默认事件问题

    解决vue change阻止默认事件问题

    背景:复选框内部有个数量增减选项,并且两个都是change事件.当触发内部数量增减事件时,外部的复选change事件也会触发,体验很不好. 使用事件 @click.stop.native.prevent 解决 (使用@click.stop 或者 @click.prevent都无效,直接报错还阻止不了事件) <el-checkbox-group v-model="checked_list" @click.stop @change=checkedFn> <el-check

  • 解决vue+element 键盘回车事件导致页面刷新的问题

    背景 今天发现输入框输入内容后回车就会刷新页面 解决 <el-form :inline="true" @submit.native.prevent> </el-form> el-from 加上 @submit.native.prevent 具体是参考element-ui文档解决的 W3C 标准中有如下规定: When there is only one single-line text input field in a form, the user agent

  • vue中阻止click事件冒泡,防止触发另一个事件的方法

    使用vue阻止子级元素的click事件冒泡,很简单,用stop <div @click="test1()"> <span @click.stop="test2()">按钮1</span> <span>按钮2</span> </div> 这样点击div里面的按钮1,就不会触发div绑定时间test1()方法. 以上这篇vue中阻止click事件冒泡,防止触发另一个事件的方法就是小编分享给大家的全部

  • js事件冒泡、事件捕获和阻止默认事件详解

    js事件冒泡、事件捕获和阻止默认事件详解

    谈起JavaScript的 事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. 1.事件冒泡 先来看一段代码: var $input = document.getElementsByTagName("input")[0]; var $div = document.getElementsByTagName("div")[0]; var $body = document.getElementsByTagName("bo

  • 解决vue组件中click事件失效的问题

    最近使用vue学习开发移动端的项目,使用了bette-scroll插件做滚动.在引入better-scroll的组件中使用@click事件的时候,点击事件失效,v-on:click.v-bind:click.@click.native都不行,试了一下@touchstart是却是可以的,发现better-scroll的配置中没有设置click:true,设置过之后click事件成功. 后来在使用vuex的时候一直报"[vuex] unknown mutation type: changeCity&

  • js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件

    1. event.preventDefault();  -- 阻止元素的默认事件. 注:a元素的点击跳转的默认事件 , button,radio等表单元素的默认事件 , div 元素没有默认事件 例: 复制代码 代码如下: <a href="http://www.baidu.com" target="_black">百度</a> 复制代码 代码如下: var samp = document.getElementByTagName("

  • JS阻止冒泡事件以及默认事件发生的简单方法

    如果<p>是在<div>里面,那么呢,<P>有一个onclick事件,<div>也有onclick事件,为了触发<P>的点击事件时,不触发父元素的点击事件,那么就需要调用如下函数: 复制代码 代码如下: function stopBubble(e){  if(e&&e.stopPropagation){//非IE   e.stopPropagation();  }  else{//IE   window.event.cancelB

  • 解决Vue @submit 提交后不刷新页面问题

    我就废话不多说了,大家还是直接看代码吧~ <form @submit="add"> <!-- 表单 --> </form> add: function(e){ // 阻止页面刷新 e.preventDefault(); // 逻辑代码 }, 补充知识:@submit.prevent阻止默认事件提交 例如: 以上这篇解决Vue @submit 提交后不刷新页面问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • javascript处理a标签超链接默认事件的方法

    本文实例讲述了javascript处理a标签超链接默认事件的方法.分享给大家供大家参考.具体分析如下: 有时需要在a标签上添加click事件,并且跳转前处理一些事务,故需要做一些处理:通常前端会给出一个<a href="#">link</a>来代表这个行为,有些还会这样写<a href="###">link</a>或者<a href="javascript:void(0);">link&

随机推荐