小程序 事件委托给父元素scrollview 获取不到子元素view的绑定的dataset值

news2024/11/26 20:40:41

点击事件委托到父元素:scrollview 减少多次循环绑定 :
通过点击事件的dataset判断了点击哪个子元素。

常能见到e.target或者e.currentTarget。
简单来说,currentTarget就是当前对象,target就是整个对象(包含子元素)。
所以当点击某单一组件时,直接获取其data可以用currentTarget,而当该组件被包了一层,事件在父元素,数据在子元素,则需要使用target


问题:

但是在scrollview里第一层子元素view绑定的data-xxx的属性获取不到。

解决:
用css的pointer-events属性
pointer-events: none; // 元素永远不会触发点击事件,会冒泡的下去

//wxml

.title,.money, .second {
  pointer-events:none;
}

<scroll-view class="left" hidden="{{!leftType}}" bindtap="toDetail" data-left>
        <view wx:for="{{lostList.data}}" wx:for-item="pay"  class="pay-list-item" data-refno="{{pay.REFNO}}">
            <text class="title" data-count>丢失数量:{{pay.Count}}</text>
            <view class="money">
                <text class="{{pay.Status=='取消'?'cl89':''}}" style="point-event:none">- {{pay.Amount}}</text>
            <view class="flex_row second" >
                <text class="time">{{pay.Time}}</text>
                <text class="pay {{pay.Status=='取消'?'cl89':'cl50'}}">{{pay.Status}}</text>
            </view>
        </view>
</scroll-view>

 这个点击事件bindtap='toDetal'就能获取到data-refno这个dataset

 .title,.money, .second {
  pointer-events:none;
}

 效果:无论点这个子view的任何地方都能获取到 refno了

 

参考链接的评论:

小程序中使用事件委托,子级有多个元素时点击dataset里属性为空? | 微信开放社区

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/720466.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

如何实现移动端侧边目录栏收缩,并监听点击目录栏以外则自动收缩

父组件&#xff0c;index界面&#xff0c;注意此时expend按钮在父组件中 <template><el-container><el-aside class"Aside"><MAside expendClick"expendClick" :message"message" /></el-aside><div class&qu…

2、CCesium二次开发环境搭建

CCesium是使用c和opengl实现的桌面三维地球&#xff0c;所以进行二次开发需要搭建c的开发环境。 在windows系统上c开发可以使用vs或cmake和mingw clion开发。本人使用mingwclion&#xff0c;如果使用其他ide那我也帮不了你。cmake是构建项目的&#xff0c;clion使用2020.1版本…

Lesson3-1:OpenCV图像处理---几何变换

几何变换 学习目标 掌握图像的缩放&#xff0c;平移&#xff0c;旋转等了解数字图像的仿射变换和透射变换 1 图像缩放 缩放是对图像的大小进行调整&#xff0c;即使图像放大或缩小。 API cv2.resize(src,dsize,fx0,fy0,interpolationcv2.INTER_LINEAR)参数&#xff1a; s…

数据结构 | 二叉排序树

一、数据结构定义 /* 二叉排序树 */ typedef int TreeType; typedef struct BSTNode {TreeType data;struct BSTNode* lchild, * rchild; }*BSTree, BSTNode;二、方法概览 BSTNode* CreateTreeNode(TreeType data); // 创建二叉树结点 BSTNode* InsertTree(TreeType data, BS…

Vulnhub靶机PWNLAB:INIT writeup

靶机介绍 靶机下载&#xff1a;https://www.vulnhub.com/entry/matrix-2,279/ ​ 个人微信公众号&#xff1a;网络安全学习爱好者 信息搜集 arp扫描存活主机 ​​​ 根据MAC地址比较靶机IP为​192.168.30.131 ​​ nmap扫描全端口及端口服、版本 ​​​ 目录扫描123…

通信相关知识(三) 接入网

接入网的定界 接入网的功能 用户口功能、业务口功能、核心功能、传送功能、接入网系统管理功能。 ADSL 非对称数字用户线路&#xff08;ADSL&#xff0c;Asymmetric Digital Subscriber Line&#xff09;是数字用户线路&#xff08;xDSL&#xff0c;Digital Subscriber Lin…

【Java从入门到大牛】Java基础语法

&#x1f525; 本文由 程序喵正在路上 原创&#xff0c;CSDN首发&#xff01; &#x1f496; 系列专栏&#xff1a;Java从入门到大牛 &#x1f320; 首发时间&#xff1a;2023年7月5日 &#x1f98b; 欢迎关注&#x1f5b1;点赞&#x1f44d;收藏&#x1f31f;留言&#x1f43e…

黑客(自学笔记)

黑客&#xff0c;对很多人来说充满诱惑力。很多人可以发现这门领域如同任何一门领域&#xff0c;越深入越敬畏&#xff0c;知识如海洋&#xff0c;黑客也存在一些等级&#xff0c;参考知道创宇 CEO ic&#xff08;世界顶级黑客团队 0x557 成员&#xff09;的分享如下&#xff1…

第一章:项目架构演变

1、在设计系统时&#xff0c;应该多思考 墨菲定律 1. 任何事都没有表面上看起来那么简单。 2. 所有的事做起来都会比你预计的时间长。 3. 可能出错的事总会出错。 4. 如果你担心某种情况发生&#xff0c;那么它就更有可能发生。 2、在划分时&#xff0c;也要思考康威定律。…

centos7安装zookeeper的环境变量配置导致用户登录不了系统

废话不多说&#xff0c;我修改的/etc/profile,如果这个文件改错会造成所有用户都登录不了系统。 第一步&#xff1a;解决进不了系统 1.在登陆界面按&#xff1a;alt ctrlf2进入命令模式&#xff0c;输入密码登录后再输入&#xff1a; /usr/bin/sudo /usr/bin/vi /etc/profile …

Apache Doris 在拈花云科的统一数据中台实践,One Size Fits All

作者&#xff5c;NearFar X Lab 团队 洪守伟、陈超、周志银、左益、武超 整理&#xff5c;SelectDB 内容团队 导读&#xff1a; 无锡拈花云科技服务有限公司&#xff08;以下简称拈花云科&#xff09;是由中国创意文旅集成商拈花湾文旅和北京滴普科技有限公司共同孵化组建的。…

微信小程序Vant组件配置及使用

Vant Weapp 官网文档&#xff1a;介绍 - Vant Weapp (gitee.io) Vant Weapp GitHub地址&#xff1a;youzan/vant-weapp: 轻量、可靠的小程序 UI 组件库 (github.com) 本教程使用下载代码方式引入vant组件 1. 下载vant组件源码 通过git下载vant源码 git clone https://github…

【适配器模式】—— 每天一点小知识

&#x1f4a7; 适配器模式 \color{#FF1493}{适配器模式} 适配器模式&#x1f4a7; &#x1f337; 仰望天空&#xff0c;妳我亦是行人.✨ &#x1f984; 个人主页——微风撞见云的博客&#x1f390; &#x1f433; 《数据结构与算法》专栏的文章图文并茂&#x1f995;…

Kafka学习笔记(基础篇)

目录 Kafka简介 消息队列 Kafka的应用场景 消息队列的两种模型 Kafka集群搭建 Kafka的生产者/消费者/工具 Kafka的基准测试工具 Kafka Java API开发 生产者程序开发 消费者程序开发 生产者使用异步方式生产消息 Kafka中的重要概念 消费者组 幂等性 事务编程 Ka…

英文单词的3σ值

最近做log的nlp&#xff0c;发现日志当中有一些很长的但是无意义的词汇&#xff0c;很影响训练模型&#xff0c;这边想通过单次长度去排除那些无意义词汇&#xff0c;去查了gpt英文单次的3σ值&#xff0c;记录下

谷歌浏览器中的谷歌翻译失效了?如何解决谷歌翻译不响应问题?

1 原因分析 因为谷歌把国内的服务器关了。 2 下载软件 &#xff08;1&#xff09;Mac OS https://github.com/Ponderfly/GoogleTranslateIpCheck/releases/download/1.6/GoogleTranslateIpCheck-mac-x64.zip&#xff08;2&#xff09;Windows https://github.com/Ponderfl…

【MySQL体系结构及CetOS7安装MySQL和修改密码】

MySQL体系结构及安装MySQL MySQL体系结构CentOS7安装MySQL四种方法1、离线安装2、在线安装3、通用二级制方式4、容器方式安装 设置及修改密码忘记密码恢复 MySQL体系结构 MySQL是一种常用的关系型数据库管理系统&#xff08;RDBMS&#xff09;&#xff0c;其体系结构包括以下&…

ARM架构(ARM汇编指令练习)

文章目录 前言一、MOV指令二、内存访问指令1.LDR指令2.STR指令 三、数据处理指令1.ADD指令2.SUB指令3.位操作指令4.CMP指令 四、跳转指令总结 前言 本篇文章带大家来学习ARM汇编的一些常用的指令&#xff0c;这里指令都是非常基础的指令。 一、MOV指令 MOV&#xff08;Move&…

一个 Kill 不掉的 MySQL 会话

究竟是什么原因&#xff0c;导致主从切换过程中存在一个无法 kill 的会话&#xff1f; 作者&#xff1a;秦广飞 爱可生 DBA 团队成员&#xff0c;负责项目日常问题处理及公司平台问题排查&#xff0c;对数据库有兴趣&#xff0c;对技术有想法。一入 IT 深似海&#xff0c;从此节…

【钱处理】商业计算怎样才能保证精度不丢失

以项目驱动学习&#xff0c;以实践检验真知 前言 很多系统都有「处理金额」的需求&#xff0c;比如电商系统、财务系统、收银系统&#xff0c;等等。只要和钱扯上关系&#xff0c;就不得不打起十二万分精神来对待&#xff0c;一分一毫都不能出错&#xff0c;否则对系统和用户来…