[英]How to click on an element, move the mouse over other elements and then select those elements that you hovered over with JavaScript?
I am basically trying to replicate the .selectable()
method of jQuery
but I need it in vanilla JavaScript
.我基本上是在尝试复制 jQuery 的
jQuery
.selectable()
方法,但我需要在vanilla JavaScript
中使用它。 Which event listener
method should I use?我应该使用哪种
event listener
方法? I've tried with mousedown
, but how can I detect that another element has been visited?我已经尝试过
mousedown
,但是如何检测到另一个元素已被访问? Here is an example on how jQuery
does it: [http://jsfiddle.net/ZfevM/99/]
这是
jQuery
如何做到的示例: [http://jsfiddle.net/ZfevM/99/]
I was able to figure it out.我能够弄清楚。 Had to work with
mouseup
and mousemove
as well.还必须使用
mouseup
和mousemove
。 Here is what I came up with and it works as expected: [https://repl.it/repls/EquatorialLumberingInfinity]
这是我想出的,它按预期工作:
[https://repl.it/repls/EquatorialLumberingInfinity]
Any thoughts or alternative solutions are welcomed!欢迎任何想法或替代解决方案!
You could make use of window.getSelection() and [selection].getRangeAt([index]);您可以使用 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 has.containsNode() function to compare against given set;选择 has.containsNode() function 与给定集合进行比较; Range has.startContainer and.endContainer along with.commonAncestorContainer to compare against given structure
范围 has.startContainer 和 .endContainer 以及.commonAncestorContainer 与给定结构进行比较
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.