---

MouseEvent的事件类别

序号	事件	描述
1	mousedown	鼠标按下
2	mouseup	鼠标释放
3	click	左键单击
4	dblclick	左键双击
5	mousemove	鼠标移动
6	mouseover	鼠标经过
7	mouseout	鼠标滑出
8	mouseenter	鼠标进入
9	mouseleave	鼠标离开
10	contextmenu	右键菜单

执行顺序为mousedown=>mouseup=>click
mouseover和mouseout子元素也会触发，可以冒泡触发
mouseenter和mouseleave是针对侦听的对象触发，阻止了冒泡

---

阻止鼠标的默认事件

event.preventDefault();
event.returnValue = false; // IE8及以下兼容写法
return false; // IE兼容写法，只用作on事件阻止默认事件

---

去除单击右键菜单

document.body.addEventListener("contextmenu", clickHandler);

function clickHandler(event) {
	// 阻止事件默认行为
	event.preventDefault();
	console.log(event.type);
}

---

阻止图像默认拖拽

let img = document.querySelector("img");
img.addEventListener("mousedown", mouseHandler);

function mouseHandler(event) {
    event.preventDefault();
}

---

阻止文字的拖拽和选择

document.body.addEventListener("mousedown", mouseHandler);

function mouseHandler(event){
    event.preventDefault();
}

---

阻止表单提交及重置

let bn = document.querySelector("[type=submit]");
bn.addEventListener("click", clickHandler);

function clickHandler(event){
	event.preventDefault();
}

或者对form来写

let form = document.querySelector("form");
form.addEventListener("submit", submitHandler);

function submitHandler(event){
	event.preventDefault();
	// IE8 及以下兼容写法
	// event.returnValue = false;
} 

---

打印输出MouseEvent对象内容

document.body.addEventListener("mousedown", clickHandler);

function clickHandler(event){
	console.log(event);
}

altKey、ctrlKey、shiftKey、metaKey是否按键点击
button、buttons、which用来判断是鼠标的哪个键操作
左键对应的值为0、1、1
中键对应的值为1、4、2
右键对应的值为2、2、3
timeStamp从页面打开开始到触发事件的时间

---

clientX和clientY与x和y

clientX和clientY与x和y一样，都是客户区域坐标，指鼠标的坐标，以浏览器显示区域的左上角开始，x和y是新浏览器支持。

---

offsetXY

offsetX，offsetY针对目标元素的左上角坐标(event.target)。

---

layerXY

layerX，layerY往上找有定位属性的父元素的左上角(自身有定位属性的话就是相对于自身)，都没有的话，就是相对于body的左上角。

---

当元素及它的父级都没有定位属性时，以body的左上角为原点

---

当元素的父级都有定位属性时，以父级的左上角为原点

---

当元素自身有定位属性时，以自身的左上角为原点

---

pageXY

pageX，pageY相对页面左上角的距离。

---

screenXY

screenX，screenY相对屏幕左上角的位置。

---

总结

clientX和clientY与x和y一样，以浏览器显示区域的左上角开始，指鼠标的坐标。x和y是新浏览器支持的产物。
offsetX和offsetY针对目标元素的左上角坐标，从padding开始。
layerX和layerY往上找有定位属性的父元素的左上角(自身有定位属性的话就是相对于自身)，都没有的话，就是相对于body的左上角。
pageX和pageY相对页面左上角的距离。
screenX和screenY相对屏幕左上角的位置。