如何在网页中监听触控板事件

在做 Baidu IFE 题的时候，有一道是任意缩放 canvas 中的图片。作为一个鼠标坏了半年也没换的懒人来说，触控板双指缩放就是在正常不过的事情了。等到真正写代码才注意到，我竟然不知道要用到哪个事件。更惊讶的是，百度了一番，竟然没人问这个问题。翻遍了 MDN，最后把目标选定在 WheelEvent 上面了。

当滚动鼠标滚轮或操作其它类似输入设备时会触发滚轮事件。

原来触控板是类似鼠标滚轮的输入设备，我竟然从来没有思考过这样的事情，刷新了我对触控板的认知（笑）。

代码理所当然的就写了出来

document.querySelector('canvas').addListener('wheel', function(e) {
    console.log(e.deltaX);
    console.log(e.deltaY);
});

不知道是我笔记本的触控板垃圾，还是常识，deltaX 和 deltaY 中只会有一个非 0 值。嘛，能识别触发就是成功了。诶，等等，向上滑和向左滑的值我能理解，缩放时候的值怎么看不懂？一会儿是 deltaX，一会儿是 deltaY，我怎么和滑动手势区别开？Google 了一番，最后在 StackOverflow 上找到了答案，在触控板缩放的时候，e.ctrlKey 会被置为 true。等等，我想到了什么。

当滚动鼠标滚轮或操作其它类似输入设备时会触发滚轮事件。

原来触控板是类似鼠标滚轮的输入设备，我竟然从来没有思考过这样的事情，再一次刷新了我对触控板的认知（笑）。

所以最终的代码是这样。

document.querySelector('canvas').addListener('wheel', function(e) {
    if (e.ctrlKey) {
        let delta = e.deltaX + e.deltaY;
        if (delta > 0)
            console.log('缩小');
        else
            console.log('放大');
    } else {
        console.log('滚动');
    }
});

最后最大的收获反而不是怎么监听触控板，而是知道了触控板就是鼠标滚轮（笑）。啥，你说 Mac？没见过的孩子呢。