JavaScript onmousedown事件在移动设备触发存在延迟，如何修复？

问题根因 #

• 事件适配问题：当前绑定的onmousedown属于鼠标事件，移动端为了兼容双击缩放等操作，对鼠标事件有默认300ms左右的触发延迟
• 音频重复加载：每次触发点击都重新创建Audio实例加载资源，移动端资源加载开销更大，进一步加剧延迟
• 缺少移动端专属的触摸行为配置

具体修复步骤 #

1. 新增viewport配置消除默认300ms点击延迟，在HTML文件的<head>标签内添加如下代码：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

2. 预加载音频资源，避免每次点击重复加载，修改JS代码如下：

var clicks = 0;
// 全局预创建音频实例，仅初始化一次
var clickAudio = new Audio('https://www.joiji.com/click.wav');
function hello() {
    clicks += 1;
    // 重置播放进度，支持连续点击触发音效
    clickAudio.currentTime = 0;
    clickAudio.play();
    document.getElementById("clicks").innerHTML = clicks;
};

3. 替换事件绑定，优先使用移动端原生触摸事件，同时保留鼠标事件兼容桌面端，修改按钮代码：

<button name="cat" class="cat" type="button" ontouchstart="hello()" onmousedown="hello()"></button>

4. 新增CSS属性明确触摸行为，进一步降低系统判断延迟，在.cat类的CSS规则中新增对应配置：

.cat{
    /* 原有属性保持不变，新增如下配置 */
    touch-action: manipulation;
    background: url(https://th.bing.com/th/id/R.a5d003f6d8eae2434ac07f1b310f3f41?rik=LCY0xhBKNiUZxw&riu=http%3a%2f%2fwww.designboom.com%2fwp-content%2fuploads%2f2015%2f09%2fgoogle_logo_03-818x600.jpg&ehk=PtBQW0bMoGuZptNFF8o5w4Mpc5qeoLstvbWD8cr6V14%3d&risl=&pid=ImgRaw&r=0) no-repeat;
    cursor:pointer;
    border: none; 
    -webkit-tap-highlight-color: transparent;
    width:100%;
    height:530px;
    max-width: 530px;
    background-size:contain;
}

可选优化 #

如果发现按钮:active状态切换有延迟，可在JS中添加一行全局触摸事件监听：

document.body.addEventListener('touchstart', () => {}, false);

内容的提问来源于stack exchange，提问作者r0naldinio