Touchstart 和 Touchend 在移动设备上不起作用答案

【问题标题】：Touchstart and Touchend not working on mobileTouchstart 和 Touchend 在移动设备上不起作用
【发布时间】：2020-12-18 14:00:11
【问题描述】：

我正在制作一个简单的 javascript 游戏，玩家在其中射击传入的射弹。下面是不工作的代码sn-p。

['click', 'touchstart', 'touchend'].forEach(
    function (type) {
        window.addEventListener (type,
            function(event) {
                
                const angle = Math.atan2(event.clientY - yHalf, event.clientX - xHalf)

                const velocity = {
                x: Math.cos(angle) * 5,
                y: Math.sin(angle) * 5
                }

                projectiles.push(
                    new Projectile(
                        xHalf,
                        yHalf,
                        5,
                        'white',
                        velocity
                    )
                )
            }
        )
    }
)

代码简要说明：当 'click' 或 'touchstart' 或 'touchend' 事件发生时，它会将 Projectile 对象添加到数组中。然后连续绘制数组（上面的代码sn-p中没有包含这个函数）。基本上，当点击鼠标或触摸屏幕时，玩家会发射弹丸。

但问题是，当我在手机上时，我触摸屏幕时没有任何反应，这意味着上面的代码 sn -p 不起作用。但是，它确实可以在计算机上运行。如果我按下鼠标或在开发者工具中模拟触摸，玩家会发射弹丸。

我在我的 github 页面上托管了游戏以及完整的源代码：

游戏：https://v1ct0rv00rh33s.github.io/Space-Balls/

源码：https://github.com/v1ct0rv00rh33s/Space-Balls

我可以帮助我在手机上完成这项工作吗？

编辑：我正在使用带有 iOS 12.4 和 Safari 的 iPhone 7 Plus。

【问题讨论】：

您能添加您的浏览器、操作系统和型号吗？
在哪个平台上？触摸 API 在移动浏览器之间不同步（甚至在桌面浏览器中也不同步），并且各种平台都有自己的触摸事件实现。

标签： javascript touch-event

【解决方案1】：

我在手机上测试过，效果很好。大多数浏览器都支持触摸事件，但请查看https://caniuse.com/touch

【讨论】：

显然，它适用于安卓手机。