在CoffeeScript / JavaScript中将鼠标光标位置用作范围起点

本文介绍了在CoffeeScript / JavaScript中将鼠标光标位置用作范围起点的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如标题所示，我想使用光标的位置作为范围的起点。

现在有了这样的简单示例

 < html> 
。 
。 
< p>快速棕色狐狸跳过懒惰狗< / p> 
。 
。 
< / html>

在CS / JS端的事情我有事件侦听设置为鼠标移动，尝试打印光标位置的偏移量，但是我没有使用正确的方法，最终得到 undefined 或没有方法错误

 
 
 再次，真的很简单的CS，因为我真的只想测试它。

$（document）.ready - > $（document）.mousemove - > target = event.target console.log（＃{target.offset（）}）//也尝试了.rangeOffset .offset range.setStart（）函数。

例如，如果我在fox中的f上鼠标移动，我想要的偏移量返回为16，这样我可以设置范围的开始像这样 range.setStart（target，16）。

任何帮助设置我的方向是正确的赞赏。

编辑：在输入这个并提交它之后，我意识到希望元素返回偏移信息是多么的愚蠢。 我非常失落，请指导我。

解决方案

函数 document.caretPositionFromPoint（）或用于Webkit document.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 undefined or no 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 .offset

Ideally 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 Webkit document.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中将鼠标光标位置用作范围起点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！