Question

就像我在标题中说的那样。我想要定位光标附近的元素。

 <style type="text/css">
   span{
       display: inline-block;
       min-width: 80px;
       border-bottom: 2px solid black;
   }
 </style>


<div contenteditable="true">
  <span></span>
  <span></span>
  <span></span>
</div>

当用户输入一些单词时，我真的想知道哪个是curson。

Answer 1

您可以将监听器附加到onmouseover事件，以便在鼠标位于您的某个范围之上时触发某个功能。

<div contenteditable="true">
 <span onmouseover="myFunction1()"></span>
 <span onmouseover="myFunction2()"></span>
 <span onmouseover="myFunction3()"></span>
</div>

function myFunction1() {
 // the mouse is above span 1
}
// etc...

官方文件here

修改：在了解OP正在寻找的内容后修改答案

当你使用jQuery并使用动态添加的元素时，我建议你使用这样的东西：

$(document).on('mouseenter', 'div span', function() {
    $(this).css('border-color', 'red');
})
.on('mouseleave', 'div span', function() {
    $(this).css('border-color', 'black');
});

我创建了一个JSFiddle示例here

Answer 2

我已经找到了一种使用浏览器 API document.elementFromPoint(x,y) 在光标附近查找 DOM 元素的通用方法。我在 this 文章中使用了该方法，并且我还在 npm 上发布了一个相同的包，名为 cursor-nearby-elements

如何在光标附近获取元素？

2 个答案: