避免微信小程序中 catchlongtap 和 catchtap 同时绑定带来的问题

2023-12-25 18:52:41

问题分析

在微信小程序中，我们可以通过 catchlongtap/bindlongtap 和 catchtap/bindtap 事件来处理长按和点击事件。但是，如果我们将这两种事件同时绑定到同一个元素上，则在长按后，会依次触发 longtap 和 tap 事件。这可能会导致一些问题，例如：

误触发：在长按时，由于 tap 事件会紧接着 longtap 事件触发，因此可能会导致一些意外的操作。例如，如果我们在长按时想触发一个删除操作，但由于 tap 事件紧随其后，可能会导致误删。
性能问题：由于同时触发了两个事件，可能会导致小程序性能下降。尤其是在元素上有大量子元素的情况下，性能问题会更加明显。

解决方案

为了避免 catchlongtap/bindlongtap 和 catchtap/bindtap 同时绑定元素后带来的问题，我们可以采取以下解决方案：

使用 mutually exclusive events ：在小程序中，我们可以使用 mutually exclusive events 来确保在同一元素上只能触发一个事件。例如，我们可以将 catchlongtap 和 catchtap 事件绑定到不同的元素上，或者使用条件语句来判断事件的类型，并只执行其中一个事件的处理逻辑。
使用事件代理 ：事件代理是一种将事件委托给父元素来处理的方式。在小程序中，我们可以使用事件代理来处理长按和点击事件。这样，我们就只需要在父元素上绑定一个事件处理函数，而不需要在每个子元素上绑定事件。
使用节流或防抖 ：节流和防抖都是用来控制事件触发频率的技术。我们可以使用节流或防抖来限制长按和点击事件的触发频率，从而避免误触发和性能问题。

具体示例

使用 mutually exclusive events

<view catchlongtap="onLongTap">长按</view>
<view catchtap="onTap">点击</view>

在上面的示例中，我们使用 mutually exclusive events 来确保在同一元素上只能触发一个事件。我们将 catchlongtap 事件绑定到一个元素，并将 catchtap 事件绑定到另一个元素。这样，在长按时，只会触发 longtap 事件，而不会触发 tap 事件。

使用事件代理

<view>
  <view catchlongtap="onLongTap"></view>
  <view catchtap="onTap"></view>
</view>

Page({
  onLongTap(e) {
    console.log('长按', e);
  },
  onTap(e) {
    console.log('点击', e);
  }
})

在上面的示例中，我们使用事件代理来处理长按和点击事件。我们将 catchlongtap 和 catchtap 事件绑定到父元素上，并在父元素的事件处理函数中判断事件的类型，并只执行其中一个事件的处理逻辑。

使用节流或防抖

Page({
  onLongTap(e) {
    this.throttle(e);
  },
  onTap(e) {
    this.debounce(e);
  },
  throttle(e) {
    // 节流：限制事件触发频率
    if (this.lastLongTapTime && Date.now() - this.lastLongTapTime < 300) {
      return;
    }
    this.lastLongTapTime = Date.now();

    // 执行事件处理逻辑
    console.log('长按', e);
  },
  debounce(e) {
    // 防抖：延迟事件触发
    if (this.tapTimer) {
      clearTimeout(this.tapTimer);
    }
    this.tapTimer = setTimeout(() => {
      // 执行事件处理逻辑
      console.log('点击', e);
    }, 300);
  }
})