如何单击一个元素，将鼠标移到其他元素上，然后选择您使用 JavaScript 悬停的那些元素？

Posted 2023-05-07

【中文标题】如何单击一个元素，将鼠标移到其他元素上，然后选择您使用 JavaScript 悬停的那些元素？

【英文标题】：How to click on an element, move the mouse over other elements and then select those elements that you hovered over with JavaScript?

【发布时间】：2020-10-03 08:18:27

【问题描述】：

我基本上是在尝试复制jQuery 的.selectable() 方法，但我需要在vanilla javascript 中使用它。我应该使用哪种event listener 方法？我已经尝试使用mousedown，但我如何检测到另一个元素已被访问？ 以下是jQuery 的示例：[http://jsfiddle.net/ZfevM/99/]

【参考方案1】：

你可以使用 window.getSelection() 和 [selection].getRangeAt([index]);

document
  .getElementsByTagName('body')[0]
  .addEventListener('mouseup', 
     function() 
       const selection = window.getSelection(); 
       const range = selection.getRangeAt(0); 

       console.log( selection, range ) 
  )

Selection 具有 .containsNode() 函数来与给定集合进行比较； Range 具有 .startContainer 和 .endContainer 以及 .commonAncestorContainer 以与给定结构进行比较

【参考方案2】：

我能够弄清楚。还必须与mouseup 和mousemove 一起工作。这是我想出的，它按预期工作：[https://repl.it/repls/EquatorialLumberingInfinity]

欢迎任何想法或替代解决方案！