鼠标事件与鼠标位置

一、鼠标事件
一些具体的事件都派生自 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