bom 对象之 window event对象offsetX, clientX, pageX, screenX, layerX, x区别-大前端-舒克老师的前端

bom 对象之 window event对象offsetX, clientX, pageX, screenX, layerX, x区别 JS 分享

shuke 2018-3-11 2089

通过 3 张图和 1 张表格，轻松区别 JavaScript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性。

一、测试代码如下：

<!DOCTYPE HTML>  
<html>  
<head>  
<meta charset="utf-8" />  
<title>Javascript</title>  
<style>  
body{margin:0;padding:0;background:#ccc;font-size:12px;overflow:auto}  
.main{width: 500px;height: 330px;position: relative;margin: 250px auto 0;background-color: #eee;}  
.box{position: absolute;width: 220px;height: 180px;background-color: orange;top: 80px;left: 80px;}  
</style>  
</head>  
  
<body style="height:1600px;">  
<div>  
    <div id="box"></div>  
</div>  
  
<script>  
var oBox = document.getElementById('box');  
  
window.onload = function(){  
      
    oBox.onmousedown = function(ev){  
        ev = ev || window.event;  
          
        console.log(ev.offsetX, ev.offsetY);  
        console.log(ev.clientX, ev.clientY);  
        console.log(ev.pageX, ev.pageY);  
        console.log(ev.screenX, ev.screenY);  
        console.log(ev.layerX, ev.layerY);  
        console.log(ev.x, ev.y);  
    }  
}  
  
</script>  
</body>  
</html>

二、不同浏览器对这些属性的支持：

三、图解 event.offsetX，event.clientX，event.pageX，event.screenX属性

四、图解 event.layerX，event.layerY 属性

五、图解 event.x，event.y 属性

六、Jquery 兼容写法

jQuery event 事件对象，包含有 event.offsetX， event.clientX，event.pageX，event.screenX等属性（firefox 浏览器中， offsetX 为 undefined）。firefox 获取 offsetX / offsetY 的值，需要通过 event 对象的属性 originalEvent。

$(function(){  
    $("#box").mousedown(function(event){  
        console.log(event.offsetX, event.offsetY);  
        console.log(event.clientX, event.clientY);  
        console.log(event.pageX, event.pageY);  
        console.log(event.screenX, event.screenY);  
  
        /* firefox */  
        console.log(event.originalEvent.layerX, event.originalEvent.layerY);  
    });  
});

原文地址：https://www.cnblogs.com/jiangxiaobo/p/6593584.html

最新回复 (1)

全部楼主

shuke 2018-6-17

2 楼

Javascript:
网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth

JQuery:
$(document).ready(function(){
alert($(window).height()); //浏览器当前窗口可视区域高度
alert($(document).height()); //浏览器当前窗口文档的高度
alert($(document.body).height());//浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度包括border padding margin
alert($(window).width()); //浏览器当前窗口可视区域宽度
alert($(document).width());//浏览器当前窗口文档对象宽度
alert($(document.body).width());//浏览器当前窗口文档body的宽度
alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度包括border padding margin
})

发新帖

shuke

主题数
263

帖子数
79

注册排名
1