在CoffeeScript / JavaScript中将鼠标光标位置用作范围起点 [英] Using mouse cursor position as a range starting point in CoffeeScript/JavaScript
问题描述
如标题所示，我想使用光标的位置作为范围的起点。
现在有了这样的简单示例
< html>
。
。
< p>快速棕色狐狸跳过懒惰狗< / p>
。
。
< / html>
在CS / JS端的事情我有事件侦听设置为鼠标移动，尝试打印光标位置的偏移量，但是我没有使用正确的方法，最终得到 undefined 或没有方法错误
再次，真的很简单的CS，因为我真的只想测试它。
$（document）.ready - >range.setStart（）函数。
$（document）.mousemove - >
target = event.target
console.log（＃{target.offset（）}）//也尝试了.rangeOffset .offset
例如，如果我在fox中的f上鼠标移动，我想要的偏移量返回为16，这样我可以设置范围的开始像这样
range.setStart（target，16）。
任何帮助设置我的方向是正确的赞赏。
编辑：在输入这个并提交它之后，我意识到希望元素返回偏移信息是多么的愚蠢。 我非常失落，请指导我。
解决方案
函数
document.caretPositionFromPoint（）或用于Webkitdocument.caretRangeFromPoint（）从事件中获取X和Y坐标，并返回一个插入符位置，然后我可以使用它来创建范围的起点。$（document）.ready - >
setRange =（event） - >
if document.caretPositionFromPoint
#for Firefox
else if document.caretRangeFromPoint
range = document.caretRangeFromPoint（event.pageX，event.pageY）
targetNode = range。 startContainer
offset = range.startOffset
range.setStart（targetNode，offset）
range.setEnd（targetNode，10）#just to test
sel = window。 getSelection（）
sel.removeAllRanges（）
sel.addRange（range）
element = document.getElementById（content）
element.addEventListener（'mousemove '，setRange，true）#eventlistener而不是.mousemove事件冒泡
As the title states, I would like to use my cursor's position as the start point to a range.
Right now have simple sample like this
<html> . . <p>The quick brown fox jumps over the lazy dog</p> . . </html>On the CS/JS side of things I have event listen set to mouse move that attempts to print out the offset for the cursor position, however I am not using the correct method and end up getting either
undefinedorno method errors.Again, really simple CS for the time being since I really just wanted to test it out.
$(document).ready -> $(document).mousemove -> target = event.target console.log("#{target.offset()}") // also tried .rangeOffset .offsetIdeally I would like something that I can input into a
range.setStart()function.For example, if I was to be moused over the f in fox I would want the offset to be return as 16 so that I may then set the start of the range like so
range.setStart(target,16).Any help setting me in the right direction would be greatly appreciated.
edit: After typing this up and submitting it I realized how silly it was to expect the element to give me back offset information. I am terribly lost, please guide me.
解决方案After much googling and many hours of troubleshooting I finally came up with a solution that works for my purposes.
The function
document.caretPositionFromPoint()or for Webkitdocument.caretRangeFromPoint()takes X and Y coordinates from an event and returns a caret position that I can then use to create the start point of my range with.$(document).ready -> setRange = (event) -> if document.caretPositionFromPoint #for Firefox else if document.caretRangeFromPoint range = document.caretRangeFromPoint(event.pageX, event.pageY) targetNode = range.startContainer offset = range.startOffset range.setStart(targetNode, offset) range.setEnd(targetNode, 10) #just to test sel = window.getSelection() sel.removeAllRanges() sel.addRange(range) element = document.getElementById("content") element.addEventListener('mousemove', setRange, true) #eventlistener instead of .mousemove for event bubbling
这篇关于在CoffeeScript / JavaScript中将鼠标光标位置用作范围起点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
