Run the callback whenever the user input type changes (mouse
or touch
). Useful for enabling/disabling code depending on the input device. This process is dynamic and works with hybrid devices (e.g. touchscreen laptops).
Use two event listeners. Assume mouse
input initially and bind a touchstart
event listener to the document.
On touchstart
, add a mousemove
event listener to listen for two consecutive mousemove
events firing within 20ms, using performance.now()
.
Run the callback with the input type as an argument in either of these situations.
代码片段
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.');
});