您的位置：首页 > Web前端 > HTML5

浏览器鼠标位置PageX/Y,offsetX/Y,screenX/Y,clientX/Y,layerX/Y与兼容

2018-03-15 11:02 549 查看
PageX/Y:返回鼠标指针的位置，相对于文档的左边缘与上边缘，会随着页面滚动而改变
兼容性：除IE6/7/8不支持外，其余浏览器均支持
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(document).mousemove(function(e){ 
    $("span").text("X: " + e.pageX + ", Y: " + e.pageY); 
  });
});
</script>
</head>
<body>
<p>鼠标指针位于： <span></span></p>
</body>
</html>

clientX/Y 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标/垂直坐标。客户区指的是当前窗口。
clientX/Y获取到的是触发点相对浏览器可视区域左上角距离，不随页面滚动而改变兼容性：所有浏览器均支持
offsetX/Y获取到是触发点相对被触发dom的左上角距离，不过左上角基准点在不同浏览器中有区别，其中在IE中以内容区左上角为基准点不包括边框，如果触发点在边框上会返回负值，而chrome中以边框左上角为基准点。兼容性：IE所有版本，chrome，Safari均完美支持，Firefox不支持
layerX/Y获取到的是触发点相对被触发dom左上角的距离，数值与offsetX/Y相同，这个变量就是firefox用来替代offsetX/Y的，基准点为边框左上角，但是有个条件就是，被触发的dom需要设置为position:relative或者position:absolute，否则会返回相对html文档区域左上角的距离兼容性：IE6/7/8不支持，opera不支持，IE9/10和Chrome、Safari均支持
screenX/Y 事件属性可返回事件发生时鼠标指针相对于屏幕的水平坐标/垂直坐标。screenX/Y获取到的是触发点相对显示器屏幕左上角的距离，不随页面滚动而改变兼容性：所有浏览器均支持
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  h5
相关文章推荐
新的分享
章节导航