鼠标事件
-
距离可视区域左上角位置
-
clientX: 33
-
clientY: 31
-
-
如果目标对象是定位方式,值于offset相似,如果目标对象是非定位方式,取父容器的左上角位置,如果父容器未定位,继续向上取
- layerX: 28
- layerY: 20
-
相对事件目标对象的左上角位置
- offsetX: 16
- offsetY: 9
-
鼠标移动时相对上次获取坐标的距离
- movementX: 0
- movementY: 0
-
相对页面顶端左上角位置
- pageX: 28
- pageY: 28
-
相对屏幕左上角位置
- screenX: 38
- screenY: 107
-
x,y 和clientX,clientY相同
-
x: 32
-
y: 33
-
按下键点击鼠标时变为true
altKey: false
ctrlKey: false
metaKey: false
shiftKey: false
- 针对mousedown事件的属性,判断按下的键
左键 中键 右键
button: 0 1 2
buttons: 0 4 2
which: 1 2 3
- click 点击左键
- dblclick 双击左键
- mousedown 按下键
- mouseup 释放键
- mouseover 滑过
- mouseout 滑出
- mouseenter 进入
- mouseleave 离开
- mousemove 移动
- contextmenu 右键菜单
FocusEvent 焦距事件
- focus 汇聚焦距
- blur 失去焦距
- focus汇聚焦距的方式有点击,tab切换
input事件
-
inputEvent
var input0=document.querySelector("#input0"); input0.addEventListener("input",inputHandler); function inputHandler(e){ console.log(e); e.data: "o" 输入的内容 e.inputType: "insertText" 输入的类型 insertCompositionText 包括插入文本,删除文本,插入输入法文本,剪切粘贴文本等等 e.isComposing: true 是否是输入法文本 if(!isNaN(e.data)) input0.value=input0.value.replace(e.data,""); } // 节流
阻止默认事件
-
1、表单事件中的submit reset 使用阻止默认事件可以取消提交和重置
var form=document.querySelector("form"); form.addEventListener("submit",formHandler); form.addEventListener("reset",formHandler); function formHandler(e){ e.preventDefault(); }
-
2、当使用contextmenu事件,取消鼠标右键菜单
document.addEventListener("contextmenu",mouseHandler); function mouseHandler(e){ e.preventDefault(); }
-
3、当针对元素拖拽时,元素内有文本,文本会被选中
var div=document.querySelector("div"); document.addEventListener("mousedown",mouseHandler); function mouseHandler(e){ e.preventDefault(); }
-
4、图片拖拽时产生禁止拖拽图标
var img=document.querySelector("img"); img.addEventListener("mousedown",mouseHandler); function mouseHandler(e){ e.preventDefault(); }