图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别

最新推荐文章于 2023-07-05 15:40:48 发布

rocket v3.5.6

最新推荐文章于 2023-07-05 15:40:48 发布

阅读量469

点赞数 1

分类专栏： js逆向文章标签： javascript

原文链接：https://www.cnblogs.com/jiangxiaobo/p/6593584.html

版权

js逆向专栏收录该内容

9 篇文章 14 订阅

订阅专栏

最近在尝试某验验证码JS逆向

其中文字点选验证码，看JS代码的时候，有如下概念：offsetX, clientX, pageX, screenX, layerX

鄙人，看到一位博友的文章，觉得很通俗易懂，所以也转载一下

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

一、测试代码如下：

<!DOCTYPE HTML>  
<html lang="zh-cn">  
<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 class="main">  
    <div class="box" 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>

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

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

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

rocket v3.5.6

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别

最近在尝试某验验证码JS逆向其中文字点选验证码，看JS代码的时候，有如下概念：offsetX, clientX, pageX, screenX, layerX鄙人，看到一位博友的文章，觉得很通俗易懂，所以也转载一下通过 3 张图和 1 张表格，轻松区别 JavaScript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性。一、测试代码如下：<!DOCTYPE HTML> <html lang="zh-cn"
复制链接

扫一扫