当用户输入类型改变执行回调 onUserInputChange – JavaScript 实用代码片段 JavaScript,实用代码,代码片段,ES6

每当用户输入类型改变( mousetouch )时运行回调。用于根据输入设备启用/禁用代码。这个过程是动态的,适用于混合设备(例如触摸屏笔记本电脑)。

使用两个事件监听器。首先假设 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.');
});

更多代码 JavaScript 实用代码片段 请查看 https://www.html.cn/30-seconds-of-code/

赞(0) 打赏
未经允许不得转载:WEB前端开发 » 当用户输入类型改变执行回调 onUserInputChange – JavaScript 实用代码片段 JavaScript,实用代码,代码片段,ES6

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏