UNI-APP中点击事件多重响应问题的解决，list列表项item和列表项item中按钮的点击事件冲突，重叠

最新推荐文章于 2024-08-03 16:32:15 发布
最新推荐文章于 2024-08-03 16:32:15 发布
阅读量3k 收藏 1
点赞数 4
分类专栏： uni-app 文章标签： uni-app click 冲突 list 按钮
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xialong_927/article/details/115620446
版权

问题描述：

list列表项item和列表项item中按钮的点击事件冲突

点击list列表项item执行列表项item点击事件

点击列表项item中按钮，先执行按钮的点击事件，然后继续执行列表项item点击事件（重复）

解决办法：

修改列表项item的click事件为 

<view class="list_item" @click="gotoDeviceDetailPage(index)">

修改列表项item中按钮的点击事件为

<view class="iconfont icon-collection_fill text_ye bottom_pr" @click.stop="cancelAttention(index)"></view>

完！！！

沧海龙腾LV
关注
专栏目录
uni-app - 解决列表长按事件与点击事件冲突，完美解决@longpress长按触发事件与@click点击事件相互冲突的问题，uniapp长按事件和点击冲突
王佳斌
02-05 6266
网上大部分方法滑动时都会触发长按事件，只适用于单个容器，不适合列表，且再多一个点击事件是无法实现的。在 uniapp 全端兼容（h5网页 / 支付宝微信小程序 / 安卓苹果app / nvue 等全平台）解决长按事件与点击事件冲突问题，长按事件与点击事件同时触发怎么办？该示例可解决列表长按事件与点击事件冲突问题，并且滑动时不会触发长按事件，且容器内可以再套一个点击事件。
uniapp(全端兼容) - 最新详细实现 “卡片式堆叠“ 轮播图效果，堆叠在一起的轮播图片可左右滑动切换展示，类似卡牌堆在一起只有第一张图片显示全下面的就露一点边儿，堆叠轮播组件插件（详细示例代码）
高级前端工程师
07-17 2202
uni-app，轮播图，安卓app，苹果app，微信小程序，移动端，H5网页，手机网站，微信小程序、支付宝小程序，手机app端，nvue，堆叠，层叠，swiper，仿照小米有品，堆叠轮播组件，堆叠轮播插件，组件，Uniapp堆叠卡片轮播图，堆叠到后面的图片有虚化效果，可以在堆叠图片上写文字或叠加图片等效果，可以手动滑动，也可以定时自动轮播，swiper堆叠图，3D层叠轮播图，微信小程序实现堆叠式轮播，卡片层叠滑动效果，叠层轮播图切换组件，详细教程，错开叠加，图片堆叠，左右按键切换，vue，swiper实现叠
uni-list-item添加点击事件click无效解决方法
jakelihua
05-31 2054
本文讲解uni-list-item添加点击事件click无效解决方法。
uniapp 点击事件
最新发布
qq_33240556的博客
08-03 467
在页面的Page对象或组件的methodsmethods: {
uniapp 列表按钮防止重复点击
ssorth的博客
01-28 749
uniapp防止重复点击
uniapp uniuni-list-item 点击事件无效
avscript的专栏
03-27 1216
uniapp uniuni-list-item 点击事件无效
uniapp解决长按事件与点击事件冲突问题
残阳曦月
04-21 989
直接贴代码Demo,粘贴到页面直接可以测,按需求 写入方法即可
uni-app插件swipe-action swipe-action-item的click会同时触发两次的解决办法（自用）
04-29 2688
分析原因： bindingx.js的onClick和mpwxs.js的onClickForPC同时提交emit 解决办法：试了app真机、微信小程序、h5都没问题： 摘自：https://github.com/dcloudio/uni-ui/issues/287
微信小程序代码实现：拖拽排序列表
06-21
在实际应用中，我们还需要考虑一些细节问题，比如防止相邻元素重叠、边界限制以及动画效果的添加。可以设置`movable-view`的`scale`属性实现缩放效果，通过`inertia`属性控制拖动惯性，以及利用`min-x`, `min-y`, `...
uniapp上传、预览、删除图片
qq_53089988的博客
02-11 1043
效果图如下： 代码如下所示： <template> <view class="upload-img"> <image src="/static/logo.png" class="img" @tap="onGetImgClick"></image> <view class="uni-list list-pd"> <view class="uni-list list-pd"> <v...
uniapp 使用uChars堆叠柱状图遇到坑
qq_35867245的博客
12-03 2572
uChars官网地址：秋云uCharts图表组件 一、绘制堆叠柱状图 首先，去官网 下载demo项目，讲需要的组件引入到项目中，放入到uniapp项目对应的components文件下（注意：要把整个qiun-data-chars文件夹全部复制过去），如图： 然后，根据自己的需求引用，先引入组件并注册 import QiunDataCharts from '../components/qiun-data-charts/components/qiun-data-charts/qiun-data-c
uni-app避免重复点击
weixin_62201881的博客
07-01 4747
uni-app中避免按钮短时间内重复点击全局配置
给ListeView列表中的每一个Item添加点击事件
weixin_30511107的博客
09-05 600
首先声明本文主要是在ArrayAdapter、SimpleAdapter中对ListView的每一项进行点击事件！ 先看下运行结果 第一步：在xml布局中写一个ListView <ListView android:layout_width="match_parent" android:layout_height="match_parent" ...
uniapp中swiper组件里面使用transfrom:translateX样式导致样式重叠问题与解决办法
weixin_51390548的博客
08-06 997
uniapp中swiper组件里面使用transfrom:translateX样式导致样式重叠问题与解决
uniapp开发小程序：防止按钮多次点击 多次触发事件
weixin_48596030的博客
05-31 1051
【代码】uniapp开发小程序：防止按钮多次点击 多次触发事件。
uniapp阻止冒泡的方法，点击事件嵌套点击事件，怎么阻止同时触发
m0_49714202的博客
11-02 892
uniapp阻止冒泡的方法，点击事件嵌套点击事件，怎么阻止同时触发
uniapp uni-list-item点击事件无效怎么办？
weixin_50606255的博客
07-01 8468
在最初使用uniapp中自带的组件时，总是会遇到一些问题，像uni-list-item组件在点击时会有不生效的情况： <uni-list class="listArr"> <uni-list-item v-for="(item,index) in listArr" :key="index" :title="item.title" show-arrow="true" :thumb="item.img" @click="gotolist(item.title)">
@click点击事件冲突解决（uniapp阻止事件冒泡）
土拨鼠博客
06-20 3288
@click点击事件冲突解决
学习笔记 （2） uni-app中的数据绑定 和 事件绑定，前端零基础入门
m0_60635609的博客
03-20 341
data中定以一个数组，最终将数组渲染到页面上data () {return {arr: [{ name: ‘刘能’, age: 29 },{ name: ‘赵四’, age: 39 },{ name: ‘宋小宝’, age: 49 },{ name: ‘小沈阳’, age: 59 }利用 v-for 进行循环名字 : {{ item.name }} --年龄 : {{item.age}}
uni-app canvas点击事件
10-18
uni-app 中的 canvas 点击事件可以通过以下步骤实现： 1. 在 canvas 标签上添加一个 tap 事件监听器。 2. 在监听器中获取点击位置的坐标。 3. 判断点击位置是否在需要响应点击事件的区域内。 以下是示例代码： ``` <template> <canvas @tap="handleTap"></canvas> </template> <script> export default { methods: { handleTap(event) { const x = event.mp.touches[0].x const y = event.mp.touches[0].y // 判断点击位置是否在需要响应点击事件的区域内 if (x > 100 && x < 200 && y > 100 && y < 200) { // 响应点击事件 console.log('canvas 被点击了') } } } } </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值