十年专注于品牌网站建设 十年专注于品牌网站建设,低调、有情怀的网络应用服务商!
南昌百恒网络微信公众号 扫一扫关注
小程序
tel-icon全国服务热线:400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络微信小程序

百恒网络

南昌百恒网络

图文结合介绍客户区坐标、页面坐标及屏幕坐标三者区别及用法

百恒网络 2016-12-21 1061

在实现交互及JS动画过程中经常要对屏幕、页面、客户区、可以视区进行判断,确定对像当前所处理的位置以及下步一的动向,在此南昌网站制作公司百恒网络前端开发工程师向大家介绍这三者区别及用法。
       1.客户区坐标位置
       鼠标事件都是在浏览器视口中的特定位置上发生的。这个位置信息保存在事件对象的 clientX 和 clientY 属性中。所有浏览器都支持这两个属性,它们的值表示事件发生时鼠标指针在视口中的水平 和垂直坐标。如图展示了视口中客户区坐标位置的含义。
       可以使用类似下列代码取得鼠标事件的客户端坐标信息: 

clientX,clientY客户区
       var div = document.getElementById("myDiv");
       EventUtil.addHandler(div, "click", function(event){
              event = EventUtil.getEvent(event);
              alert("Client coordinates: " + event.clientX + "," + event.clientY); 
       });
       
这里为一个<div>元素指定了 onclick 事件处理程序。当用户单击这个元素时,就会看到事件的 客户端坐标信息。注意,这些值中不包括页面滚动的距离,因此这个位置并不表示鼠标在页面上的位置。
       2.页面坐标位置
       通过客户区坐标能够知道鼠标是在视口中什么位置发生的,而页面坐标通过事件对象的 pageX 和 pageY 属性,能告诉你事件是在页面中的什么位置发生的。换句话说,这两个属性表示鼠标光标在页面 中的位置,因此坐标是从页面本身而非视口的左边和顶边计算的。 以下代码可以取得鼠标事件在页面中的坐标: 
        var div = document.getElementById("myDiv");
       EventUtil.addHandler(div, "click", function(event){
              event = EventUtil.getEvent(event); 
              alert("Page coordinates: " + event.pageX + "|" + pageX + "," + event.pageY + "|"+pageY); 
       });

       在页面没有滚动的情况下,pageX 和 pageY 的值与 clientX 和 clientY 的值相等。 IE8 及更早版本不支持事件对象上的页面坐标,不过使用客户区坐标和滚动信息可以计算出来。这 时候需要用到 document.body(混杂模式)或document.documentElement(标准模式)中的 scrollLeft 和 scrollTop 属性。计算过程如下所示: 
        var div = document.getElementById("myDiv");
       EventUtil.addHandler(div, "click", function(event){
              event = EventUtil.getEvent(event);
              var pageX = event.pageX,
                     pageY = event.pageY; 
              if (pageX === undefined){
                     pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
              } 
              if (pageY === undefined){
                     pageY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
              } 
              alert("Page coordinates: " + event.pageX + "|" + pageX + "," + event.pageY + "|"+pageY); 
});
       3.屏幕坐标位置
       鼠标事件发生时,不仅会有相对于浏览器窗口的位置,还有一个相对于整个电脑屏幕的位置。而通 过 screenX 和 screenY 属性就可以确定鼠标事件发生时鼠标指针相对于整个屏幕的坐标信息。图 13-5 展示了浏览器中屏幕坐标的含义。 
       可以使用类似下面的代码取得鼠标事件的屏幕坐标: 
screenX,screenY屏幕坐标位置
        var div = document.getElementById("myDiv");
       EventUtil.addHandler(div, "click", function(event){
              event = EventUtil.getEvent(event);
              alert("Screen coordinates: " + event.screenX + "," + event.screenY); 
       });
       与前一个例子类似,这里也是为<div>元素指定了一个 onclick 事件处理程序。当这个元素被单 击时,就会显示出事件的屏幕坐标信息了。 
实例完整代码如下:
<!DOCTYPE html>
<html>
<head>
       <title>Screen Coordinates Example</title>
       <script type="text/javascript" src="EventUtil.js"></script>
</head>
<body>
       <div id="myDiv" style="background-color:red;height:100px;width:100px">Click me</div>
       <script type="text/javascript">
              var div = document.getElementById("myDiv");
              EventUtil.addHandler(div, "click", function(event){
                     event = EventUtil.getEvent(event);
                     alert("Screen coordinates: " + event.screenX + "," + event.screenY); 
              });
       </script>
</body>
</html>
  本文仅限内部技术人员学习交流,不得作于其他商业用途.希望此文对广技人员有所帮助。原创文章出自:南昌网站建设公司-百恒网络http://www.jxbh.cn/如转载请注明出处!
400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络小程序

欢迎您的光顾,我们将竭诚为您服务×

售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售后服务 售后服务
 
售后服务 售后服务
 
备案专线 备案专线
 
×