e.target.dataset和e.currentTarget.dataset

作用：

e.target.dataset与e.currentTarget.dataset的作用：获取标签中定义的值，定义方法 data-*=某个值

区别：

e.target.dataset是指获取当前点击dom的值，若没有对应的值则取的是undefined
e.currentTarget 是指注册了监听点击事件的组件，会获取有事件的那个元素

使用：

1需要在触发元素上用“data-”+“属性”的形式定义，如value值写成data-value,calss值写成data-class
2.通过e.target.dataset.属性能够获取属性

e是事件对象，里面包括很多方法
e.target指向返回事件的目标节点(触发该事件的节点)
e.target.dataset返回一个对象，对象中是设置的属性，如果设置的时候不加data，则获取到的对象为空。

<divclass="shortcut"@touchstart.stop.prevent="onShortcutTouchStart"@touchmove.stop.prevent="onShortcutTouchMove"@touchend.stop.prevent><!--touch的三个事件 阻止冒泡和默认行为 --><ul><liv-for="(item, index) in shortcutList":key="item":data-index="index"class="item":class="{ current: currentIndex === index }">{{ item }}</li></ul></div>// 点击组名，跳转至对应的组function onShortcutTouchStart(e) {// console.log(e.target.dataset) // ul下面的li// li上绑定了data-index，使用dom api拿到const anchorIndex = parseInt(e.target.dataset.index)touch.y1 = e.touches[0].pageYtouch.anchorIndex = anchorIndexscrollTo(anchorIndex)}

e.target.dataset和e.currentTarget.dataset相关推荐

【微信小程序】e.target.id和e.currentTarget.dataset.id的区别
1.需求 page1展示一个列表,选中列表中的一项,获取该项的一些属性值,set到缓存里. page2 onLoad时从缓存里读取这个缓存,进行使用. 2.原始代码 ①page1的xml文件列表 & ...
工作398-关于e.currentTarget.dataset的取值。
wxjs代码:GetAction: function (e) {var action = e.currentTarget.dataset.action;console.log(action); //f ...
微信小程序解决按钮点击后e.currentTarget.dataset为空的方法
1.有时候我们点击按钮后返回的信息是这样的,显示dataset为空,无法获取到真实值: 这个时候我们要修改wxml里的页面,在按钮中加入data-属性(全部小写)的字段: <view class ...
dataset存入mysql_将dataset写入数据库
最近在将excel中的文件导入到数据库中,用程序进行编写,由于数据量较大所以速度很慢,后来采用了SqlBulkCopy类,解决了速度的问题,我就insert语句,sqldataadapter.upda ...
机器学习的训练数据(Training Dataset)、测试数据(Testing Dataset)和验证数据(Validation Dataset)
三者的意义 - 训练数据:用来训练模型的数据 - 验证数据:用来检验模型准确率 - 测试数据:再一次确认验证数据集中的模型是好的模型. 一般步骤: 测试数据集和验证数据的数据一定不能用来训练,否则会出 ...
实战SSM_O2O商铺_37【商品】商品列表之View层的实现
文章目录概述 productmanagement.html productmanage.css productmanage.js 联调 Github地址概述在完成了后端的逻辑后,我们来实现商品列 ...
微信小程序的开发（前端）
前端快捷键代码规范快捷键:shift+alt+F 导航栏自定义设置 {"pages": ["index/index","index/index2& ...
带你快速实现购物车功能
一.熟悉购物车所谓熟悉购物车,是指对购物车的所有商品的操作熟知.如:商品的单选.全选.数量的增加.规格的变化.商品的管理.收藏商品.删除失效商品等相关的逻辑操作.对全部的流程做到心中有数,实现的时候 ...
uniapp实现可滑动顶部选项卡
uniapp实现可滑动顶部选项卡利用<scroll-view>和<swiper>实现可滑动顶部选项卡,实现效果类似下图: 这里,简单模拟一下,实现一个大致效果一.构建顶部t ...

e.target.dataset和e.currentTarget.dataset

作用：

区别：

使用：

e.target.dataset和e.currentTarget.dataset相关推荐

最新文章

热门文章