微信小程序-currentTarget和target的区别

最新推荐文章于 2024-10-24 17:23:56 发布

原创最新推荐文章于 2024-10-24 17:23:56 发布 · 3k 阅读

2 ·

CC 4.0 BY-SA版权

微信小程序专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何通过事件委托的方式，在小程序中实现点击轮播图跳转至详情页的功能。详细解释了如何利用data-index属性传递图片索引，并通过事件对象获取该索引以完成页面跳转。

想实现的功能:点击list页面的轮播图会跳转到相应的detail页面
使用事件委托的方式,给父元素swiper添加点击事件catchtap='carouselToDetail'
data-index='0':给点击事件的回调函数传index过去

<swiper catchtap='carouselToDetail' indicator-dots='true' indicator-color='red' indicator-active-color='yellow' autoplay='true'>
    <swiper-item>
      <image data-index='0' src='/images/detail/carousel/1.jpg'></image>
    </swiper-item>
    <swiper-item>
      <image data-index='1' src='/images/detail/carousel/2.jpeg'></image>
    </swiper-item>
    <swiper-item>
      <image data-index='2' src='/images/detail/carousel/3.jpg'></image>
    </swiper-item>
    <swiper-item>
      <image data-index='3' src='/images/detail/carousel/4.png'></image>
    </swiper-item>
  </swiper>

list.js

 //点击轮播图跳转
  carouselToDetail(event){
    console.log(event);
  },

可以看到传过来的index是放到了target中,因为是swiper中的image触发的,不是swiper本身触发的
这里写图片描述
如果向下面这样子把data-index='0'放到swiper中,由它自身触发,index就会放到currentTarget中

打印结果

currentTarget和target的区别:

target指向的是触发事件的元素
currentTarget指向的是捕获事件的元素(也就是元素自身)

好了,把data-index='0'改回来放到image中,继续写我们的跳转

//点击轮播图跳转
  carouselToDetail(event){
    let index = event.target.dataset.index
    wx.navigateTo({
      url: '/pages/detail/detail?index=' + index,
    })
  },

这样就能成功跳转了