By yk

更新日期:

文章目录
  1. 1. PC端
  2. 2. 移动端
  3. 3. Code
    1. 3.1. PC端code
    2. 3.2. 移动端code

本文介绍浏览器中PC端页面开发中的 offsetX,clientX,pageX,screenX,layerX,x 距离的区别。

移动端页面开发中的 clientX,pageX,radiusX,screenX 距离的区别。

本文中就只讲述 X 的距离了，因为 Y 与 X 意义都相同，只不过一个是水平方向，一个是垂直方向上的。

PC端

距离 意义
offset 相对于当前注册点击事件的左上角，鼠标偏移量。
client 相对于浏览器左上角的鼠标偏移量。点击同一个位置：有滚动条时，会随着滚动条的变化而改变。
page 相对于整个document左上角的偏移量，不会随着滚动条的变化而改变。
screen 相对于电脑屏幕的距离。鼠标不动的情况下，点击两个不同区域，xy值不会变化。
layer 相对于父元素为 position:relative 或position:absolute. 的左上角的鼠标点击偏移量。
x 等同于 client 的解释。

移动端

移动端测试我借用了jquery封装的 e.originalEvent.touches[0] 属性来获取的屏幕触点值。

距离 意义
client 相对于浏览器左上角的鼠标偏移量。会随着滚动条的变化而变化。
pageX 相对于整个document左上角的偏移量，不会随着滚动条的变化而改变。
radiusX 能够包围用户和触摸平面的接触面的最小椭圆的水平轴(X轴)半径
screenX 相对于电脑屏幕的距离。鼠标不动的情况下，点击两个不同区域，xy值不会变化。

为了方便大家可以自己试一试，我把我测试过程中的代码放在下面，以便大家自己测试。

Code

PC端code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>pc端距离测试</title>
  <style>
    *{margin:0;padding:0;}
    html{
      width: 100%;
      height: 100%;
    }
    body{
      width: 2500px;
      height: 1600px;
      position: relative;
    }
    .title{
      text-align: center;
    }
    .main{
      margin-left: 500px;
      margin-top: 400px;
      width: 400px;
      height: 300px;
      border: 1px solid #f00;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      /*position: relative;*/
    }
    .box{
      width: 200px;
      height: 150px;
      border: 1px solid #0f0;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div class="main">
    <div class="box" id="myBox">box</div>
  </div>
  <div class="title">测试 offsetX, clientX, pageX, screenX, layerX, x</div>
  <script>
    var myBox = document.getElementById('myBox');
    myBox.addEventListener('mousedown',function(e){
      // console.log(e);
      // offset 相对于当前注册点击事件的左上角，鼠标偏移量。
      // console.log("e.offsetX: " + e.offsetX + " ---------- e.offsetY: " + e.offsetY);
      // client 相对于浏览器左上角的鼠标偏移量。点击同一个位置：有滚动条时，会随着滚动条的变化而改变。
      // console.log("e.clientX: " + e.clientX + " ---------- e.clientY: " + e.clientY);
      // page 相对于整个document左上角的偏移量，不会随着滚动条的变化而改变。
      // console.log("e.pageX: " + e.pageX + " ---------- e.pageY: " + e.pageY);
      // screen 相对于电脑屏幕的距离。鼠标不动的情况下，点击两个不同区域，xy值不会变化。
      // console.log("e.screenX: " + e.screenX + " ---------- e.screenY: " + e.screenY);
      // layer相对于父元素为 position:relative 或position:absolute. 的左上角的鼠标点击偏移量。
      // console.log("e.layerX: " + e.layerX + " ---------- e.layerY: " + e.layerY);
      // xy 等同于 client 的解释。
      // console.log("e.x: " + e.x + " ---------- e.y: " + e.y);
    })
  </script>
</body>
</html>

移动端code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=9,IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="renderer" content="webkit">
    <meta charset="utf-8">
  <title>移动端的距离</title>
  <style>
    *{margin:0;padding:0;}
    html{
      width: 100%;
      height: 100%;
    }
    body{
      width: 1500px;
      height: 1000px;
      position: relative;
    }
    .title{
      text-align: center;
    }
    .main{
      margin-left: 200px;
      margin-top: 100px;
      width: 400px;
      height: 200px;
      border: 1px solid #f00;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      /*position: relative;*/
    }
    .box{
      width: 200px;
      height: 100px;
      border: 1px solid #0f0;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div class="main">
    <button class="box" id="mBox">移动端</button>
  </div>
  <div class="title">(基于jQuery.min.js)测试 clientX, pageX, radiusX, screenX</div>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script>
    // var myBox = document.getElementById('mBox');
    // myBox.addEventListener('click', function(e){
    //  alert("ss");
    // });
    // $("body").on('click', '#mBox', function(event) {
    //  event.preventDefault();
    //  alert("22");
    // });
    // var myBox = $("#mBox");
    // myBox.on('touchstart', function(e) {
    //  e.preventDefault();
    //  console.log(e);
    //  let t = e.originalEvent.touches[0];
    //  // client 相对于浏览器左上角的鼠标偏移量。会随着滚动条的变化而变化。
    //  // console.log("t.clientX: " + t.clientX + " ---------- t.clientY: " + t.clientY);
    //  // page 相对于整个document左上角的偏移量，不会随着滚动条的变化而改变。
    //  // console.log("t.pageX: " + t.pageX + " ---------- t.pageY: " + t.pageY);
    //  // 能够包围用户和触摸平面的接触面的最小椭圆的水平轴(X轴)半径
    //  // console.log("t.radiusX: " + t.radiusX + " ---------- t.radiusY: " + t.radiusY);
    //  // screen相对于电脑屏幕的距离。鼠标不动的情况下，点击两个不同区域，xy值不会变化。
    //  console.log("t.screenX: " + t.screenX + " ---------- t.screenY: " + t.screenY);
    // });
  </script>
</body>
</html>

本章完！

文章目录
  1. 1. PC端
  2. 2. 移动端
  3. 3. Code
    1. 3.1. PC端code
    2. 3.2. 移动端code