获得点击后获得鼠标光标属性

Question

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

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

我目前正在尝试使用

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

但是这不能按预期工作，并且该值始终返回""。

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

Answer 1

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

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