【小程序】获取到的e.target与e.currentTarget区别

本文解析了在HTML和小程序中e.target与e.currentTarget的区别,通过实例说明如何使用这两个属性来处理事件冒泡,帮助读者区分并正确使用它们。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在html中这两个事件属性,很容易让我混淆,小程序中这两个属性也很重要,因此又必要好好深入理解下,让自己分清这两个Dom的属性。

MDN:

target:一个触发事件的对象的引用, 当事件处理程序在事件的冒泡或捕获阶段被调用时。
currentTarget:在捕获和起泡阶段,该属性是非常有用的,因为在这两个节点,它不同于 target 属性。它指的是当事件遍历DOM时,标识事件的当前目标。它总是引用事件处理程序附加到的元素,而不是event.target,它标识事件发生的元素。

举个例子吧:

<swiper indicator-dots='true' indicator-active-color='#fff'> 
        <swiper-item wx:for="{{list}}" wx:key='index' data-id='{{item.Id}}' bindtap='navigatorActive'>
          <text>测试</text>
        </swiper-item>
</swiper>

这里的list Json数据为:[{“Id”:1,url:'xxx},{“Id”:2,url:‘xxx’},{“Id”:3,title:‘xxx’}]

这里我想根据点击的swiper获取到dataset的值跳转到不同的页面,但是这里我给swiper-item了一个点击事件获取到值:这里写图片描述

这里可以看到只有currentTarget能够给我想要的dataset值,而target中的dataset为空对象;在看下一个

<swiper indicator-dots='true' indicator-active-color='#fff'> 
        <swiper-item wx:for="{{list}}" wx:key='index' data-id='{{item.Id}}' bindtap='navigatorActive'>
          <image src='{{item.ImgUrl}}' data-id='1111'></image>
        </swiper-item>
</swiper>

给swiper中的image的data中存放一个1111,结果:
这里写图片描述
这里获取currentTarget依然有值,而target中的dataset变成我们设置的data-id。

这时在看看MDN中的解释,就能想到事件冒泡的原因。

这里swiper-itemimage的父元素,给父元素添加事件监听,e.target指向引发触发事件的元素,点击了image的时候e.target指向的是image,所以第一次获取到的值为空对象,而第二次给image添加了data属性的时候,获取到的dataset值不在是空对象,而是我们设置的值
然后由于事件冒泡,通过image事件冒泡到swiper上,swiper上又添加了监听事件而达到了给image添加监听事件的效果,而e.currentTarget指向的是给绑定事件监听的那个对象,即swiper-item所以第一次就可以获取到所要的dataset值。




#总结:

  • 如果你点击的是添加事件元素的子元素,就用e.currentTarget来获取父元素的值,用e.target来获取子元素的值,如果没有子元素,就在本元素就不用说了,e.target===e.currentTarget
  • e.target 指向的是触发事件监听的对象
  • e.currentTarget 指向的是添加监听事件的对象

参考:Difference between e.target and e.currentTarget

### 小程序开发常见问题及解决方法 #### 一、原生组件显示在遮罩层上面的问题 当小程序中的某些原生组件(如 `map` 或者 `video`)无法被模态框或者遮罩层覆盖时,可以通过调整层级关系来解决问题。具体来说,在父容器中添加 `position: relative; z-index` 属性可以有效控制显示顺序[^1]。 #### 二、scroll-view 高度适配问题 对于 `scroll-view` 的高度不适配问题,通常是因为未正确设置其高度百分比或固定数值所致。推荐的做法是在 WXML 中动态绑定窗口的高度,并通过 WXSS 设置相对比例。例如: ```javascript Page({ data: { windowHeight: wx.getSystemInfoSync().windowHeight, }, }); ``` WXML 文件中: ```html <scroll-view scroll-y style="height: {{windowHeight}}px;"> </scroll-view> ``` 这种方式能够确保不同设备上的滚动区域都能正常展示。 #### 三、表单控件聚焦后页面上推问题 如果输入框获得焦点时触发键盘弹起而导致页面异常移动,则可以在 App.json 中全局配置 `"keyboard抵触模式"` 参数为 `"adjustPosition": false` 来禁用此行为[^2]。 #### 四、去掉按钮默认灰色圆角边框 为了实现更灵活的设计需求,开发者可能希望移除 Button 组件自带的效果。这可通过修改 CSS 实现如下效果: ```css button::after { border: none; } ``` 上述代码片段会隐藏掉所有 button 默认附加的一圈细线边界。 #### 五、获取自定义属性数据 要读取视图标签内的特定参数比如 `data-*` 开头的数据字段值,需利用事件对象传递过来的信息完成操作。下面给出一个简单例子说明如何捕获点击动作并提取关联 ID 数据: ```javascript bintap(e) { console.log('当前项ID:', e.currentTarget.dataset.id); } ``` 这里需要注意区分 `e.target` 和 `e.currentTarget` 使用场景差异。 #### 六、JSON 错误处理——Expecting 'String, Number...' 此类报错往往源于 JSON 字符串不符合标准格式引起解析失败的情况。仔细检查传入字符串是否缺少必要的引号包裹键名/值对部分即可修复该类错误[^3]。 --- ###
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值