微信小程序Canvas上的触摸事件处理答案

【问题标题】：Touch event handling on Canvas in WeChat mini-program微信小程序Canvas上的触摸事件处理
【发布时间】：2020-02-19 02:22:27
【问题描述】：

我创建了一个3D模拟微信小游戏。出于某种原因，我应该将其重新实现为微信小程序。所以我在index.wxml 上创建了一个画布。

<!--index.wxml-->
<view class="container">
  <canvas type="webgl" id="myCanvas" style="height: 750rpx; width: 750rpx;"></canvas>
</view>

我尝试像在 HTML5 中一样在画布上捕获触摸事件。

const app = getApp()

Page({
  onReady() {
    const query = wx.createSelectorQuery()
    query.select('#myCanvas').node().exec((res) => {
      const canvas = res[0].node
      canvas.addEventListener("touchstart", function (e) {
        console.log(getTouchPos(canvas, e))
      }, false);
    })
  }
})

但是我收到一条错误消息并且小程序没有运行。

VM379:1 thirdScriptError
canvas.addEventListener is not a function;at SelectorQuery callback function
TypeError: canvas.addEventListener is not a function

在小游戏上，是wx.onTouchStart()之类的。

如何在微信小程序的画布上获取Touch事件？

【问题讨论】：

标签： canvas touch wechat

【解决方案1】：

我更改了一些代码，以便可以监听触摸事件。

<!--index.wxml-->
<view class="container">
  <canvas
    type="webgl"
    id="myCanvas"
    style="height: 750rpx; width: 750rpx;"
    bindtap="onTap"
    ></canvas>
</view>

// index.js
Page({
  onReady() {},
  onTap: (event) => {
    console.log(event)
  }
})

虽然我解决了这个问题，但欢迎更多答案和cmets。例如：

详解HTML5画布和微信小程序画布（不是微信小游戏画布）的区别
其他直接或更直观的触摸事件处理方式

【讨论】：