单击反应时获取鼠标光标属性答案

【问题标题】：Get mouse cursor property on click in react单击反应时获取鼠标光标属性
【发布时间】：2019-11-22 06:50:13
【问题描述】：

我有一个简单的 react jsx 文件，我在其中渲染了一些文本。我也有相应的 css 文件，我在其中定义了当鼠标悬停在某个文本上时会发生什么。

当我在屏幕上的任意位置执行单击操作时，我想访问这些光标属性。我想在单击时检查我的光标是否具有像“文本”这样的属性，或者它是否具有任何其他值。

我目前正在尝试使用

document.body.addEventListener('mouseout', (e) => {
      if (e.relatedTarget.style.cursor = 'text') {
        console.log('this is OUT !');
      }
    });

但这并不像预期的那样工作，并且该值始终返回""。

单击文件中的任意位置时如何访问光标属性？

【问题讨论】：

if (e.relatedTarget.style.cursor = 'text') { 如果你想比较一些东西，你至少需要2个=符号（if (e.relatedTarget.style.cursor == 'text') {）
e.currentTarget 应该让您获得已为合成事件单击的元素。不过，蒂姆的上述评论应该会立即有所帮助。
如果我对您的用例的理解是正确的，您可以使用useRef 挂钩并向容器添加点击处理程序。然后你可以检查你的目标元素是否被点击。 Here 就是一个例子。这就是你要找的东西吗？
谢谢大家。我尝试将= 更改为===，但它仍然没有给我想要的结果。 @Awolf 我将尝试使用 useRef 挂钩并进行更新。
事实证明我不必把它弄得这么复杂。我发现我可以通过在我的事件监听器中调用getComputedStyle(event.target) 来获取我的光标属性。再次感谢您的投入！

标签： javascript html reactjs dom

【解决方案1】：

事实证明，我不必把它弄得这么复杂。我发现我可以通过在我的事件监听器中调用getComputedStyle(event.target) 来获取我的光标属性。所以我的事件监听器更改为

document.body.addEventListener('mouseout', (e) => {
      const { cursor } = getComputedStyle(e.target);
      // logic based on cursor value
    });

【讨论】：