通俗理解JS事件对象属性client、page、offset、screen的区别

JS事件对象中，client、page、offset和screen都是指与鼠标或触摸屏等输入设备有关的属性。

1. client：client指的是距离浏览器视口左上角的位置。它是相对于浏览器窗口左上角位置的x,y坐标。
2. page：page指的是距离文档页面左上角的位置。它是相对于网页文档左上角位置的x,y坐标。
3. offset： offset指的是距离当前元素自身的左上角位置。 它是相对于元素自身的左上角位置的x,y坐标。
4. screen：screen指的是距离屏幕左上角的位置。它是相对于屏幕左上角位置的x,y坐标。

示例代码：

    <style>
        body {
            font-size: 30px;
        }
        p {
            border: 2px solid #333;
            width: 500px;
            height: 100px;
        }
        .box {
            background-color: pink;
            width: 500px;
            height: 100px;
        }
    </style>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <div class="box">事件对象</div>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>10</p>
    <script>
        const box = document.querySelector('.box')
        box.addEventListener('click',e => {
            console.log(`e.clientX:${e.clientX} ; e.clientY:${e.clientY}`)
            console.log(`e.pageX:${e.pageX} ; e.pageY:${e.pageY}`)
            console.log(`e.offsetX:${e.offsetX} ; e.offsetY:${e.offsetY}`)
            console.log(`e.screenX:${e.screenX} ; e.screenY:${e.screenY}`)
        })
    </script>

下图是点击box盒子右下角的结果。

总结

总的来说，这些属性都是基于不同的参考系而获取的鼠标或者触摸屏的坐标位置。在不同的应用场景中，我们可以根据具体的需求和开发需求，选择使用事件对象中的不同坐标属性来判断鼠标或者触摸屏的位置，并进行相关的逻辑操作。