小程序使用UI组件怎么取消事件冒泡

该文章展示了如何在Vue.js构建的小程序中,通过在子组件上添加`catchTap`属性来阻止点击事件冒泡到父组件。这样可以确保只有子组件的`onChange`事件被触发,而不会影响父级的`onTap`事件处理。
摘要由CSDN通过智能技术生成

直接上代码

 <view class="card_right" onTap="onItemClick" >//这里是父节点的点击事件
   <view class="uni-list">
            <radio-group value="{{radioCheNo}}" class="uniGroup">//这里是使用了ui的radio组件
              <label class="uni-list-cell uni-list-cell-pd uniGroup">
                <view catchTap="true">//重点!!!这里加上catchTap="true"就可以阻止选中单选框的时候触发父节点的点击事件了
                  <radio value="{{item.no}}" data-no="{{item.no}}" data-name="{{item.name}}" 
                    data-areaName="{{item.areaName}}" data-areaId="{{item.areaId}}" onChange='change12345' //这里是radio自带的点击后触发的事件,加上catchTap="true"后只会触发这个方法
                    checked={{item.no==radioCheNo}}> />
                </view>
              </label>
            </radio-group>
        </view>
   </view>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值