Js鼠标selection&ranges
这是好大的一个领域啊, 之前确实没关注.
定义
Selection对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区,可能横跨多个元素。文本选区由用户拖拽鼠标经过文字而产生。要获取用于检查或修改的Selection对象,请调用 window.getSelection()
。
相关使用
text.selectionStart=10
text.selectionEnd=20
text.focus() //这个写在这里也可以的.
//这里text是任意的HTMLInputElement(感觉editable的元素应该都可以)
概念
-
anchor指向用户开始选择的地方,而focus指向用户结束选择的地方
-
锚点(anchor)
锚指的是一个选区的起始点(不同于HTML中的锚点链接,译者注)。当我们使用鼠标框选一个区域的时候,锚点就是我们鼠标按下瞬间的那个点。在用户拖动鼠标时,锚点是不会变的。
-
焦点(focus)
选区的焦点是该选区的终点,当您用鼠标框选一个选区的时候,焦点是你的鼠标松开瞬间所记录的那个点。随着用户拖动鼠标,焦点的位置会随着改变。
-
-
ranges
用户选择区域,俗称拖蓝。 -
Selection.toString() 方法会返回被选中区域中的纯文本
var selObj = window.getSelection();
var range = selObj.getRangeAt(0);
关键函数
- 返回该选区终点所在的节点。
- 返回一个数字,其表示的是选区终点在
focusNode
中的位置偏移量。
- 如果 focusNode 是文字节点,那么选区末尾未被选中的第一个字,在该文字节点中是第几个字(从0开始计),就返回它。
- 如果 focusNode 是一个元素,那么返回的就是在选区末尾之后第一个节点之前的同级节点总数。
- 返回该选区所包含的连续范围的数量。
- 返回选区开始的节点(
Node
)。
- 将当前的选区折叠为一个点。
range
-
Range表示包含节点和部分文本节点的文档片段。
Range
可以用Document
对象的createRange
方法创建,也可以用Selection
对象的getRangeAt
方法取得。另外,可以通过构造函数Range()
来获得一个Range
。 -
返回包含
Range
开始的节点。 -
返回 startContainer 中表示
Range
起始位置的数字。 -
设定一个包含某个节点内容的
Range
。 -
在
Range 的
起点处插入节点。
鼠标事件
坐标
- 鼠标指针在点击元素(DOM)中的X坐标。
- 鼠标指针相对于目标节点内边位置的X坐标
- 鼠标指针相对于整个文档的X坐标;
- 鼠标指针相对于全局(屏幕)的X坐标;
MouseEvent.mozInputSource
这个好, 要找到chrome对应的函数
生成事件的类型(若干 MOZ_SOURCE_*
常量如下列出)。可通过该属性获知鼠标事件是否由真实鼠标设备触发,亦或通过触摸事件触发(这可能影响处理坐标事件时的精确程度
MouseEvent.x
只读
模型
cancelled = !target.dispatchEvent(event)
event
是要被派发的事件对象。target
被用来初始化 事件 和 决定将会触发 目标.- 当该事件是可取消的(cancleable为true)并且至少一个该事件的 事件处理方法 调用了Event.preventDefault(),则返回值为
false
;否则返回true
。
UIEvent
- 返回事件相对于当前层的水平坐标。
- pageX也是支持的.
Event
三个方法加事件
- EventTarget.addEventListener
- 再html或者js xxx.onclick=function(event){}
- xxx.on(“ooo”, func) 这个写法并不是推荐写法.
- 一个布尔值,用来表示该事件是否在DOM中冒泡。
Event.type
只读
- 事件的类型(不区分大小写)
eventtarget
- EventTarget 是一个由可以接收事件的对象实现的接口,并且可以为它们创建侦听器。
Element
,document
和window
是最常见的事件目标,但是其他对象也可以是事件目标,比如XMLHttpRequest
,AudioNode
,AudioContext
等等。- 许多事件目标(包括元素,文档和 window)还支持通过 on… 属性和属性设置事件处理程序。
两个target
- event.target标识事件发生的元素。
- event.currentTarget 当事件遍历DOM时,标识事件的当前目标。它总是引用事件处理程序附加到的元素