文章目录
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的左上角。扫描二维码关注公众号，回复： 15678061 查看本文章
当元素及它的父级都没有定位属性时，以body的左上角为原点
当元素的父级都有定位属性时，以父级的左上角为原点
当元素自身有定位属性时，以自身的左上角为原点
pageXY
pageX，pageY相对页面左上角的距离。
screenXY
screenX，screenY相对屏幕左上角的位置。
总结
clientX和clientY与x和y一样，以浏览器显示区域的左上角开始，指鼠标的坐标。x和y是新浏览器支持的产物。
offsetX和offsetY针对目标元素的左上角坐标，从padding开始。
layerX和layerY往上找有定位属性的父元素的左上角(自身有定位属性的话就是相对于自身)，都没有的话，就是相对于body的左上角。
pageX和pageY相对页面左上角的距离。
screenX和screenY相对屏幕左上角的位置。