zoukankan      html  css  js  c++  java
  • 小程序中target与currentTarget的取值问题

      今天看到同事遇到了小程序swiper组件点击无法滑动切换的问题,最终发现是冒泡的问题,和swiper没关系

    原先正常的代码

    <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">用人</view>

    由于要改样式和字体需要往里面加标签

    <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">
      <image src="/xcx/xcx-nav01.png" class="xcx-img01"></image>
      <image src="/xcx/xcx-nav01-on.png" class="xcx-img02"></image>
      <view>用人</view>
    </view>

    发现clickTab点击事件虽然能进去,但是e.target.dataset.current取值是undefined

      clickTab: function (e) {
        console.log('e.target.dataset.current:',e.target.dataset.current)//undefined
        var that = this;
    
        if (this.data.currentTab === e.target.dataset.current) {
          return false;
        } else {
          that.setData({
            currentTab: e.target.dataset.current
          })
        }
      },

    猜测是冒泡的原因,查询相关资料发现是和target的触发机制有关

    target在事件流的目标阶段;currentTarget在事件流的捕获,目标及冒泡阶段。但事件流处于目标阶段,target与currentTarget指向一样, 而当处于捕获和冒泡阶段的时候,target指向被单击的对象而currentTarget指向当前事件活动的对象。在微信小程序中也可总结为:target指向发生事件的组件,currentTarget指向绑定事件的组件。

    解决方案

    把取值方式 由e.target.dataset.current 修改为e.currentTarget.dataset.current 即可,所以以后建议尽量写成currentTarget的方式可以少踩坑。

  • 相关阅读:
    上机小笔记
    机器人搬重物(BFS)
    排序汇总
    棋盘(BFS)
    权限控制:分配权限1
    asp.net identity 基础概念篇-理解什么是声明
    EntityFramework中几种更改数据的方式
    CodeFirst迁移时出现的中文乱码问题
    javascript Function()
    C#操作数据库(二)【操作SQL Server数据库的常用的类介绍】
  • 原文地址:https://www.cnblogs.com/clsl/p/14043090.html
Copyright © 2011-2022 走看看