微信小程序 target和currentTarget区别

比如有一个列表,每个子项都可以点击,我们可以把点击事件放在图片上也可以直接放在子项的根组件上,

target:指的是当前点击的组件

currentTarget:指的是事件捕获的组件

<view catchTap = "fetchImage">
  <image src="a.png" data-postId = "item.id">
</view>

 上面这段代码,如果点击想获取自定义属性postId的值是这样的:

 fetchImage:function(event){
      var  id = event.target.dataset.postid;
   }

 因为我点击的是image,但是在小程序中子组件没有这个方法,会一直向上去找,这里在view组件找到了这个方法,要获取postid的值是在image上获取,所以用的是target,而如果使用currentTarget时获取view,而view上并没有定义postid的自定义属性.

在上面的demo中:

target:指的是image

currentTarget:指的是view

 

微信小程序中的target通常指的是事件绑定的目标元素,它可以在事件处理函数中通过事件对象event被访问到。使用target可以获取到触发事件的具体元素信息,这对于实现更加复杂的交互逻辑非常重要。以下是一个简单的微信小程序使用target的案例: 假设我们有一个列表页面,用户点击列表中的每一项可以查看详细信息。在这个场景中,我们可以使用target来获取用户点击的具体是哪一个列表项。 ```javascript // 在WXML文件中 <view class="list" bindtap="onListItemTap"> <block wx:for="{{items}}" wx:key="unique"> <view class="list-item">{{item.title}}</view> </block> </view> // 在JS文件中 Page({ data: { items: [ { title: '详情1', id: 1 }, { title: '详情2', id: 2 }, { title: '详情3', id: 3 }, // 更多列表项... ] }, onListItemTap: function(event) { // event.currentTarget.dataset 可以获取到绑定事件的元素上设置的data-*属性 // 在这个例子中,我们在WXML的view元素上设置了data-id属性 const id = event.currentTarget.dataset.id; console.log('用户点击的列表项id是:', id); // 这里可以根据id去获取更多的详细信息,并进行页面跳转等操作 } }); ``` 在这个例子中,我们在WXML中为每一个列表项绑定了点击事件,并且在数据绑定中为每个列表项设置了一个`data-id`属性。在事件处理函数`onListItemTap`中,我们通过`event.currentTarget.dataset.id`获取到了被点击的列表项的id。这样我们就可以根据id来执行相应的逻辑,比如跳转到详情页面。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值