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

大家好，又见面了，我是你们的朋友全栈君。

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);
}

阻止图像默认拖拽

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 相对屏幕左上角的位置

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/210117.html原文链接：https://javaforall.cn