微信小程序之点击事件

时间：2024-04-19 13:46:28

微信小程序中常用的点击事件主要是 tap，但除此之外还有其他的触摸类事件，用于不同的交互场景。以下是一些常见的点击和触摸相关的事件及其区别：

1、tap——最基本的点击事件，适用于一般的轻触交互，类似于 HTML 中的 click 事件。

<view onTap="handleTap">点击我</view>
Page({
  handleTap: function(e) {
    console.log('tap事件触发');
  }
})

2、bindtap——类似于 onTap，是另一种声明点击事件的方式，属于数据绑定语法，也是最常见的绑定事件的方式。

<button bindtap="buttonClicked">点击按钮</button>
Page({
  buttonClicked: function(e) {
    console.log('按钮被点击');
  }
})

3、catchtap——有时候为了阻止事件冒泡，会使用 catchtap 事件，它在触发后会阻止后续的 tap 事件继续向上冒泡。

3.1.冒泡事件：

冒泡（Bubble）是一种事件传播机制，在Web开发领域和微信小程序中广泛存在。当用户在一个页面元素上触发一个事件（比如点击事件），这个事件不仅仅在这个元素上执行相应的处理函数，还会按照DOM树的层次结构，由内向外逐级向上级元素传播这个事件，直到顶层元素或者被明确阻止传播为止。这个事件从子元素向父元素逐层传递的过程就像气泡从水底升到水面一样，因此得名“事件冒泡”。

在微信小程序中，事件冒泡的概念同样适用。当你在一个嵌套结构的组件中绑定事件时，如果子组件和父组件都绑定了同一类型的事件，那么当子组件触发事件时，首先会在子组件上调用事件处理函数，接着事件会沿组件层级向上冒泡，依次触发父组件上同类型的事件处理函数。这有助于简化事件处理逻辑，因为在父组件中可以集中处理多个子组件触发的相同事件。

<view id="parent">
  <view id="child" bindtap="childTap">点击我</view>
</view>
Page({
  childTap: function(event) {
    console.log('子组件的点击事件被触发');
  },
  parentTap: function(event) {
    console.log('父组件的点击事件被触发');
  }
});

这时候点击子组件会发现控制台输出：

因为当点击子组件时，会先执行childTap函数，然后事件冒泡到父组件并执行parentTap函数。如果你不希望事件冒泡，可以使用catchtap来阻止事件的进一步冒泡。

4、longtap、touchstart、 touchmove、touchend

  • longtap长按事件，当用户长按某个元素超过一定时间后触发。
  • touchstart、 touchmove、touchend触摸相关事件，分别对应手指触摸屏幕开始、移动和离开屏幕的过程。
  • 用于实现拖拽、滑动等更复杂的交互行为

相关文章