画布上的JavaScript事件在手机上

Posted 2021-04-18

我实际上是触发了所有这些事件，但它们似乎都无法在移动设备上正常工作。画布实际上是720x1000px，并不覆盖所有页面。

    canvas.addEventListener('mousedown', alert);
    canvas.addEventListener('mousemove', alert);
    canvas.addEventListener('mouseup',   alert);
    canvas.addEventListener("touchstart", alert);
    canvas.addEventListener("touchend", alert);
    canvas.addEventListener("touchmove", alert);
    canvas.addEventListener("pointerup", alert);
    canvas.addEventListener("pointerdown", alert);
    canvas.addEventListener("pointermove", alert);

是由事件侦听器还是画布引起的问题？我该如何解决？

答案

仅在移动设备上？

从桌面检查时，事件侦听器出了一个问题，当您运行它并触发任何事件时，它会引发此错误：

TypeError: 'alert' called on an object that does not implement interface Window.

---

问题是，您的alert是什么？

1. 如果是您定义的自定义函数，并调用了alert()，则最好更改名称，因为它已经存在，它是Window interface的方法。
2. 如果是alert()，则不是对函数，您需要将reference作为回调传递给函数。如果要调用它，则需要将其包装在将作为回调传递的函数引用（匿名或命名的引用）中。

---

在事件监听器中设置回调的不同方法

• 通过匿名函数：

  canvas.addEventListener('mousemove', function(){
      alert('This is an alert');
  });
  

const canvas = document.getElementById('canvas');

canvas.addEventListener('mousemove', function(){
    alert('This is an alert');
});

#canvas{
  background-color: green;
}

<canvas id="canvas" width="100" height="100"></canvas>

以上是关于画布上的JavaScript事件在手机上的主要内容，如果未能解决你的问题，请参考以下文章

.Net语言 APP开发平台——Smobiler学习日志：如何在手机上实现表单设计

地理定位在手机上不起作用

眼镜上的视频录制功能崩溃，但在手机上没有

ListFragment 在手机上出现两次

javascript 有用的片段关于画布

JavaScript将视频并入画布框