el-checkbox 怎么阻止冒泡事件？

「爱情、让人受尽委屈。」 2022-12-28 07:24 432阅读 0赞

问题：在el-card卡片上绑定了点击选中复选框的事件，但是点击复选框会出现冒泡，导致el-card的点击事件也触发，导致点击复选框的时候，出现点击失效的现象

解决：在点击el-checkbox复选框的时候，添加阻止冒泡的处理

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70][]

<el-row :gutter="10">
          <el-col
            :xs="24"
            :sm="24"
            :md="12"
            :lg="6"
            :xl="4"
            v-for="(item, index) in dataList"
            :key="index"
          >      
             <el-card
               @click.native="itemFun(item)"
               :class="['box-card', item.checked ? 'selected' : '']">
                 <el-checkbox
                 :ref="'checkboxRef'"
                 v-model="item.checked"
                 @click.native="stopDefault($event)"
                 ></el-checkbox>
                 ...
             </el-card>
          </el-col>
    </el-row>
    
    
    js部分：
    
    methods:{
      itemFun(item) {
          item.checked = !item.checked;    
       },
      stopDefault(e) {
          e.stopPropagation();
      },
     }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70]: /images/20221120/198c064069104e0ca53f569e0e3b020f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，432人围观）

还没有评论，来说两句吧...

相关阅读

相关 el-checkbox 怎么阻止冒泡事件？

问题：在el-card卡片上绑定了点击选中复选框的事件，但是点击复选框会出现冒泡，导致el-card的点击事件也触发，导致点击复选框的时候，出现点击失效的现象解决：在点击e

「爱情、让人受尽委屈。」/ 2022年12月28日 07:24/ 0 赞/ 433 阅读

相关 react阻止事件冒泡

react阻止事件冒泡 // 这里的handleClick事件就合成事件 <a ref="aaa" onClick={ (e)=>this.handleC

心已赠人/ 2022年12月28日 01:45/ 0 赞/ 191 阅读

相关如何阻止事件冒泡

在页面开发中，我们使用JS添加事件后，默认情况事件会向上冒泡的。 <body> <div class="parent"> <input type

秒速五厘米/ 2022年11月19日 07:42/ 0 赞/ 298 阅读

相关 Vue中怎么阻止事件冒泡

> `Vue中怎么阻止事件冒泡` <div @click="test3"> <button @click.stop="test2">点击我</

迷南。/ 2022年10月28日 10:16/ 0 赞/ 202 阅读

相关 Js 冒泡事件阻止

出于对作者的尊重和感谢，原文地址为 http://www.cnblogs.com/jams742003/archive/2009/08/29/1556187.html

Bertha 。/ 2022年09月24日 00:29/ 0 赞/ 312 阅读

相关 js阻止事件冒泡

function stopHandler(event){ window.event?window.event.cancelBubble=true:eve

古城微笑少年丶/ 2022年07月13日 00:48/ 0 赞/ 335 阅读

相关阻止事件冒泡

事件的冒泡（Bubble） \- 所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发 \- 在开发中大部分情况冒泡都是有用的,如果

红太狼/ 2022年06月01日 07:18/ 0 赞/ 384 阅读

相关 vue阻止事件冒泡

vue事件修饰 `.stop` `.prevent` `.capture` `.self` `.once` ``

墨蓝/ 2022年05月28日 12:25/ 0 赞/ 361 阅读

相关 vue 阻止事件冒泡

事件修饰符在事件处理程序中调用 `event.preventDefault()` 或 `event.stopPropagation()` 是非常常见的需求。尽管我们可以

墨蓝/ 2022年04月05日 12:11/ 0 赞/ 372 阅读

相关 mpvue - 阻止事件冒泡

前言 mpvue中元素嵌套都有点击触发事件，那点击里面的元素也会触发容器的点击事件。解决方法在`@click`加上`stop`属性可以阻止冒

比眉伴天荒/ 2021年07月26日 23:50/ 0 赞/ 522 阅读