如何使此 javascript "fireworks on click" 代码也适用于触摸屏？

Question

我想在我的网站上制作一个简单的临时 "Happy 2017" 页面，我在 Code.pen 上找到了一个看起来很有趣的烟花 JS 代码：

该代码在鼠标上运行得非常好，因为烟花正好在您单击的位置爆炸，但在触摸命令下它根本不起作用，这使得它在触摸屏上根本无法交互。我可以看到代码调用了 mousedown、mousemove 和 mouseup 事件，但没有调用 touchstart 和 touchend:

 if( timerTick >= timerTotal ) {
    if( !mousedown ) {
        fireworks.push( new Firework( cw / 2, ch, random( 0, cw ), random( 0, ch / 2 ) ) );
        timerTick = 0;
    }
} else {
    timerTick++;
}

if( limiterTick >= limiterTotal ) {
    if( mousedown ) {
        fireworks.push( new Firework( cw / 2, ch, mx, my ) );
        limiterTick = 0;
    }
} else {
    limiterTick++;
}

我想这就是问题所在，但作为一个完整的 JS 菜鸟，我缺乏让它识别触摸坐标的知识。有简单的方法吗？

Answer 1

这是一个建议，可能有效也可能无效。

尝试将其与其他事件相关联。

在您发送的 link (https://codepen.io/chuongdang/pen/yzpDG)，有两个事件侦听器来处理 onmousedown 和 onmouseup 事件。

canvas.addEventListener( 'mousedown', function( e ) {
    e.preventDefault();
    mousedown = true;
});

canvas.addEventListener( 'mouseup', function( e ) {
    e.preventDefault();
    mousedown = false;
});

尝试用以下代码替换它们：

canvas.addEventListener( 'click', function( e ) {
    e.preventDefault();
    mousedown = true;
  setTimeout(function() {
    mousedown = false;
  }, 20);
});

mousedown 只是它用来检查是否进行了点击的变量。只要为真，它就会将目标设置为烟花。

因此，上面的代码所做的是将整个事件与不同的事件相关联 click（有时可以与屏幕点击互换）。单击时，它会将 mousedown 设置为 true，计数 20 毫秒，然后再次将 mousedown 设置为 false。

希望对您有所帮助！ =)

如何使此 javascript "fireworks on click" 代码也适用于触摸屏？

How to make this javascript "fireworks on click" code to also work on touch screens?

javascript

android

touch

ios

touchstart