时间戳

首页 > 解决方案 > 单击反应时获取鼠标光标属性

javascript - 单击反应时获取鼠标光标属性

问题描述

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

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

我目前正在尝试使用

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

但这并不像预期的那样工作，并且值总是返回""。

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

标签： javascripthtmlreactjsdom

解决方案

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

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

推荐阅读