通常坐标多数是用来处理交互时的鼠标位置,其实使用坐标还可以进行元素选择获取内容偏移量

介绍与坐标相关的几个冷门API: elementFromPoint()、caretPositionFromPoint()等。

通过坐标选择元素

elementFromPoint() && elementsFromPoint()

在下面这个交互示例中,点击灰色矩形,再点击颜色按钮改变它的背景色,可以尝试点击其他元素后再设置颜色试试。

See the Pen elementFromPoint() by yrq110 (@yrq110) on CodePen.


此处是通过坐标位置选择的矩形,而不是通过该监听元素事件或其他属性选择器。elementFromPoint()会基于当前可视区域的坐标(clientX, clientY)选择指定坐标位置最顶层的元素。

通过坐标获取该位置的节点及节点内容偏移量

caretPositionFromPoint()

点击文本中的任意一处,看看会发生什么:

See the Pen caretPositionFromPoint() by yrq110 (@yrq110) on CodePen.


这里将caretPositionFromPoint()与鼠标事件联系起来进行演示。

通过鼠标事件取得了光标的位置坐标,将位置传给API会得到一个CaretPosition对象,该对象包含光标所处的Node及其在Node内容中的偏移量,这个Node可以是textNode也可以是elementNode,在使用时可以根据场景进行相关操作。在本例中通过偏移量将文本元素根据光标所在位置进行了截断,创建了新的Node节点。

与选区相关的还有RangeSelection,一句话介绍就是:两者均用于文档中的选区操作,前者为包含边界节点对数据的对象,后者是前者的集合,可以通过window.getSelection()得到当前文档中的所有选区range对象。

看看下面这个示例:拖拽一段文本,观察选区的起始与终止的容器与内容索引。(注意:尝试正向和反向拖拽,看看有什么不同)

See the Pen getSelection()&getRangeAt() by yrq110 (@yrq110) on CodePen.


两者的具体属性可以参考文档,上面示例中的方向差异是因为Selection的方向性:Selection的选区具有正向、反向和无向(通过range的boundary point判断)。若为正向,则锚点为range的起始node,焦点为终止node。若为反向,则焦点为range的起始node,锚点为终止node。