作用：

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，则获取到的对象为空。

<div
      class="shortcut"
      @touchstart.stop.prevent="onShortcutTouchStart"
      @touchmove.stop.prevent="onShortcutTouchMove"
      @touchend.stop.prevent
    >
    <!--touch的三个事件 阻止冒泡和默认行为 -->
      <ul>
        <li
          v-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].pageY
    touch.anchorIndex = anchorIndex

    scrollTo(anchorIndex)
  }

项目场景：

最近写一个微信小程序，使用抽屉组件，需要获取点击事件数据

问题描述：

bindtap=“showModal1” data-target=“Modal” data-personInfo="{{drawerPeople[index]}}"使用e.currentTarget.dataset.personInfo怎么都获取不到数据，找不到原因

<!-- 抽屉 人员列表-->
<view class="cu-modal drawer-modal justify-start {{modalName=='DrawerModalL'?'show':''}}" bindtap="hideModal">
  <view class="cu-dialog basis-lg" catchtap style="top:{{CustomBar}}px;height:calc(100vh - {{CustomBar}}px)">
    <scroll-view class="scrollList" scroll-y style="height:calc(100vh - {{CustomBar}}px)">
      <view class="cu-list menu text-left">
        <view class="cu-item arrow" wx:for="{{drawerPeople}}" wx:key="index" bindtap="showModal1" data-target="Modal" data-personInfo="{{drawerPeople[index]}}">
          <view class="content">
            <text class="cuIcon-github text-grey"></text>
            <text class="text-grey">{{item.personName}}</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</view>
<!-- 抽屉 人员列表-->

原因分析：

通过console.log(e)发现e.currentTarget.dataset.personInfo中personInfo变成了personinfo,大写变小写了，变量名改变导致无法获取变量数据，由此猜测这里变量名只能采用全小写命名，“date-name”中name字段名称不能用大写，从wxml传给js的时候，大写变量名自动变全小写，导致获取不到变量数据。

<hr style=" border:solid; width:100px; height:1px;" color=#000000 size=1">
{type: "tap", timeStamp: 35913, target: {…}, currentTarget: {…}, mark: {…}, …}
changedTouches: [{…}]
currentTarget:
dataset:
personinfo: {_id: "", …}
target: "Modal"
__proto__: Object
id: ""
offsetLeft: 0
offsetTop: 210

解决方案：

将“date-name”中name字段名称改用全小写，解决问题。

在写uniapp时遇到个问题：在编译到H5时能获取到数据，而在微信小程序中却获取不到数据报错了

如图：

然后根据提示信息在相关代码处加了console.log查看输出

结果发现是在为元素添加标签时出错了

查看两端控制台才发现原因：

H5:

微信小程序：

微信小程序中将大写字母转换成了小写

解决办法：将HbuilderX中data-trailerId改为全小写