js鼠标事件 clientX、clientY、offsetX、offsetY、layerX、layerY、pageX、 pageY、screenX、screenY「建议收藏」

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46，售后保障稳定

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是针对侦听的对象触发，阻止了冒泡

阻止鼠标的默认事件

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

去除单击右键菜单

document.body.addEventListener("contextmenu",clickHandler);
function clickHandler(e){ 
   
    e.preventDefault();//阻止事件默认行为
    console.log(e.type);
}

Jetbrains全家桶1年46，售后保障稳定

阻止图像默认拖拽

var img=document.querySelector("img");
img.addEventListener("mousedown",mouseHandler);
function mouseHandler(e){ 
   
    e.preventDefault();
}

阻止文字的拖拽和选择

document.body.addEventListener("mousedown",mouseHandler);
function mouseHandler(e){ 
   
    e.preventDefault();
}

阻止表单提交及重设

var bn=document.querySelector("[type=submit]");
bn.addEventListener("click",clickHandler);
function clickHandler(e){ 
   
    e.preventDefault();
}

//或者对form来写
var form=document.querySelector("form");
form.addEventListener("submit",submitHandler);
function submitHandler(e){ 
   
    e.preventDefault();
    //e.returnValue=false;//IE8 及以下兼容写法
} 

MouseEvent对象

打印出MouseEvent对象内容：

document.body.addEventListener("mousedown",clickHandler);
function clickHandler(e){ 
   
    console.log(e);
}

打印结果如下（只截取了部分内容）：

• 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是新浏览器支持

以下截图打印的结果都是div2元素的左上顶点（从边框开始）的位置坐标。

offsetX，offsetY

• offsetX，offsetY 针对目标元素的左上角坐标（e.target），下面截图中鼠标点击有误差，不影响结果。
  

layerX,layerY

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

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

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

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

pageX， pageY

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

screenX screenY

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

总结：

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