zoukankan      html  css  js  c++  java
  • 图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别

    请到原文查看 http://blog.csdn.net/lzding/article/details/45437707

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

    一、测试代码如下:

    [html] view plain copy
     
    1. <!DOCTYPE HTML>  
    2. <html lang="zh-cn">  
    3. <head>  
    4. <meta charset="utf-8" />  
    5. <title>Javascript</title>  
    6. <style>  
    7. body{margin:0;padding:0;background:#ccc;font-size:12px;overflow:auto}  
    8. .main{ 500px;height: 330px;position: relative;margin: 250px auto 0;background-color: #eee;}  
    9. .box{position: absolute; 220px;height: 180px;background-color: orange;top: 80px;left: 80px;}  
    10. </style>  
    11. </head>  
    12.   
    13. <body style="height:1600px;">  
    14. <div class="main">  
    15.     <div class="box" id="box"></div>  
    16. </div>  
    17.   
    18. <script>  
    19. var oBox = document.getElementById('box');  
    20.   
    21. window.onload = function(){  
    22.       
    23.     oBox.onmousedown = function(ev){  
    24.         ev = ev || window.event;  
    25.           
    26.         console.log(ev.offsetX, ev.offsetY);  
    27.         console.log(ev.clientX, ev.clientY);  
    28.         console.log(ev.pageX, ev.pageY);  
    29.         console.log(ev.screenX, ev.screenY);  
    30.         console.log(ev.layerX, ev.layerY);  
    31.         console.log(ev.x, ev.y);  
    32.     }  
    33. }  
    34.   
    35. </script>  
    36. </body>  
    37. </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。

    [javascript] view plain copy
     
    1. <script>  
    2. $(function(){  
    3.     $("#box").mousedown(function(event){  
    4.         console.log(event.offsetX, event.offsetY);  
    5.         console.log(event.clientX, event.clientY);  
    6.         console.log(event.pageX, event.pageY);  
    7.         console.log(event.screenX, event.screenY);  
    8.   
    9.         /* firefox */  
    10.         console.log(event.originalEvent.layerX, event.originalEvent.layerY);  
    11.     });  
    12. });  
    13. </script>  
  • 相关阅读:
    hadoop再次集群搭建(3)-如何选择相应的hadoop版本
    48. Rotate Image
    352. Data Stream as Disjoint Interval
    163. Missing Ranges
    228. Summary Ranges
    147. Insertion Sort List
    324. Wiggle Sort II
    215. Kth Largest Element in an Array
    快速排序
    280. Wiggle Sort
  • 原文地址:https://www.cnblogs.com/xueandsi/p/5959412.html
Copyright © 2011-2022 走看看