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

<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)
  }
  • 8
    点赞
  • 42
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值