您的位置：首页 > 其它

offsetX, clientX, pageX, screenX, layerX,

2017-06-12 16:29 302 查看

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

一、测试代码如下：

[html] view
plain copy

<!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。

[javascript] view
plain copy

<script>

$(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);

    });

});

</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

offsetX, clientX, pageX, screenX, layerX,

一、测试代码如下：

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

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

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

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

六、Jquery 兼容写法