onUserInputChange - 当用户输入类型改变执行回调advanced
优质
小牛编辑
126浏览
2023-12-01
每当用户输入类型改变( mouse
或 touch
)时运行回调。用于根据输入设备启用/禁用代码。这个过程是动态的,适用于混合设备(例如触摸屏笔记本电脑)。
使用两个事件监听器。首先假设 mouse
输入并将 touchstart
事件监听器绑定到 document
上。在 touchstart
上,添加一个 mousemove
事件监听器来侦听连续两个 mousemove
事件在 20ms 内触发,使用 performance.now()
。 在任何一种情况下,输入类型将作为参数运行回调。
const onUserInputChange = callback => { let type = 'mouse', lastTime = 0; const mousemoveHandler = () => { const now = performance.now(); if (now - lastTime < 20) (type = 'mouse'), callback(type), document.removeEventListener('mousemove', mousemoveHandler); lastTime = now; }; document.addEventListener('touchstart', () => { if (type === 'touch') return; (type = 'touch'), callback(type), document.addEventListener('mousemove', mousemoveHandler); }); };
onUserInputChange(type => { console.log('The user is now using', type, 'as an input method.'); });