如何在React中检测全局鼠标移动

催眠器

在组件内部，我需要知道浏览器是否具有鼠标，它会影响该组件。

我的计划是监听全局的鼠标移动，但是我不确定如何做出反应。我可以在组件内部执行以下操作：

window.addEventListener('mousemove', onMouseMove, false);

但我不确定这是个好主意。该组件将在同一页面上使用很多次，所以也许我应该以某种方式将其放在一个组件中？

卡洛扬·科塞夫（Kaloyan Kosev）

在JavaScript世界中，没有一种可靠的方法来捕获用户是否有鼠标。有关于这个话题的相关讨论一个几个地方。但是你已经知道了。

考虑到这一点，我看到两个重要的考虑因素，以便在实施计划以侦听全局鼠标移动时不会引起性能问题。

第一次执行后，请立即杀死事件监听器。

let hasMouse = false;

const hasMouseCheck = () => {
    hasMouse = true;

    // Kill the event listener, so it executes only once
    window.removeEventListener('mousemove', hasMouseCheck, false);
};

window.addEventListener('mousemove', hasMouseCheck, false);

将逻辑放在应用程序加载时仅执行一次的地方。一个好地方是componentDidMount生命周期挂钩在您的入口（主要）组件上。挂载组件后，该方法仅被调用一次。从那里开始，将其传递到所需的任何组件。

或者，当然，您可以将以上代码片段放置在一个外部javascript文件中（而无需创建ReactJS组件），并hasMouse在全局window范围内设置该标志。然后，通过所需window.hasMouse的任何组件再次访问它。

实施对您的特定用例最有意义的方法。重要的是要确保逻辑仅执行一次；-)