一、鼠标事件
一些具体的事件都派生自 MouseEvent:WheelEvent 和DragEvent。
1.MouseEvent
// 常见鼠标事件
mousedown 鼠标按下
mouseup 鼠标释放
click 左键单击
dblclick 左键双击
mousemove 鼠标移动
mouseover 鼠标经过
mouseout 鼠标滑出
mouseenter 鼠标进入
mouseleave 鼠标离开
contextmenu 右键菜单
// 使用
document.body.addEventListener("mousedown",mousedownHandler);
function mousedownHandler(e){
e.preventDefault(); // 阻止事件默认行为
console.log(e.type);
}
2.WheelEvent
WheelEvent DOM事件会在用户滚动鼠标滚轮或操作其它类似鼠标的设备时触发。
// 属性
deltaMode delta 的滚动值的单位
deltaX 水平滚动量
deltaY 垂直滚动量
deltaZ Z轴滚动量
// 使用
document.body.addEventListener("mousewheel",mousewheelHandler);
function mousewheelHandler(e){
e.preventDefault(); // 阻止事件默认行为
console.log(e.deltaX);
}
3.DragEvent
// 拖拽事件
dragstart 当用户开始拖动元素或选择文本时
drag 拖动元素或选择文本时
dragenter 当拖动的元素或选择文本输入有效的放置目标时
dragexit 当元素不再是拖动操作的选择目标时
dragleave 当拖动的元素或文本选择离开有效的放置目标时
dragover 当将元素或文本选择拖动到有效放置目标(每几百毫秒)上时
drop 当在有效放置目标上放置元素或选择文本时
dragend 当拖动操作结束时(释放鼠标按钮或按下退出键)
// 使用
<!--使用时html元素需要增加 draggable="true" 属性-->
<div id="draggable" draggable="true">
该节点可拖拉
</div>
二、鼠标位置
clientX // 相对客户端左上角水平坐标(不包含滚动隐藏的部分)
clientY
movementX // 当前事件与上一次的mousemove事件之间水平方向的移动值
movementY
offsetX // 针对目标元素(e.target)的左上角坐标(包含padding)
offsetY
layerX // 往上找有定位属性的父元素的左上角(自身有定位属性的话就是相对于自身),都没有的话,就是相对于body的左上角
layerY
pageX // 相对页面左上角的距离(包含滚动隐藏的部分)
pageY
screenX // 相对屏幕最左上角的位置
screenY