小程序如何获取点击当前元素

小程序如何获取点击当前元素.jpg" alt="小程序如何获取点击当前元素">

背景介绍

在小程序开发中，我们经常需要获取用户的交互行为。其中一种比较常见的需求是获取用户点击了哪一个元素。这个需求在很多场景中都会用到，比如列表项点击跳转、按钮点击触发事件等。

使用原生API实现

小程序提供了一个原生的API：createSelectorQuery，可以帮助我们获取到页面上的任何一个元素。通过调用该API的boundingClientRect方法可以获取到元素左上角相对于整个页面左上角的位置和元素的大小。

  wx.createSelectorQuery().selectAll('.elementClass').boundingClientRect(function(rects) {
    rects.forEach(function (rect) {
      console.log(rect.left, rect.top, rect.width, rect.height)
    })
  }).exec()
  

结合事件对象获取

小程序中每个组件都有自己的事件，比如button组件有一个tap事件，view组件有一个tap事件等。在这些事件的回调函数里，都会传递一个事件对象，我们可以通过事件对象来获取到当前被点击的元素。

  Page({
    tapHandler: function(event) {
      console.log(event.currentTarget.dataset.id)
    }
  })
  

总结

小程序提供了多种方法来获取当前被点击的元素。无论是使用原生API还是结合事件对象，都能够快速准确地获取到页面上任意一个元素的位置和大小。

本文介绍了如何通过createSelectorQuery API和结合事件对象的方式获取点击当前元素，希望对小程序开发者有所帮助。

本文由武汉科技提供技术支持。