【javaScript】Event对象点击位置的四大方法clientX/clientY--screenX/screenY--offsetX/offsetY--pageX/pageY

JS中Event对象点击位置的四大方法

前言总结：

1. clientX/clientY(指当前对象点击的位置相对于当前浏览器窗口左上角的距离,这个属性受滚动条的影响–相对位置)；
2. screenX/screenY(指当前对象点击的位置相对于电脑屏幕左上角的绝对位置,注意是屏幕,而不是浏览器窗口–绝对位置)；
3. offsetX/offsetY(指当前对象点击的位置绝对于当前位置左上角的位置,该左上角是border的内角,也就是说clientWidth/clientHeight的左上角,起始点是content+padding内边距的左上角–绝对位置)；
4. pageX/pageY(指当前对象点击的位置绝对于浏览器窗户左上角的距离,不受滚动条影响–绝对位置)；

三个兼容性处理：

1. 该点击事件事件存在冒泡行为，并且需要处理默认事件，IE存在兼容，此处并未做处理，可以跳转该篇文章进行进一步了解；
2. Event对象的点击事件，传入的e存在兼容性，IE支持window.event，传入的e支持除IE外的主流浏览器；
3. 关于offsetX/offsetY只支持IE,Chrome,Opera，但不支持火狐，火狐支持layerX/layerY

HTML：

<div class="box">
   	<div class="box1">
         <a href="http://www.baidu.com">JS中Event对象的位置方法</a><br>
         <a href="http://www.baidu.com">JS中Event对象的位置方法</a><br>
         <a href="http://www.baidu.com">JS中Event对象的位置方法</a><br>
         <a href="http://www.baidu.com">JS中Event对象的位置方法</a><br>
         <a href="http://www.baidu.com">JS中Event对象的位置方法</a><br>
         <a href="javascript:void(0);">JS中Event对象的位置方法</a><br>
         <a href="javascript:void(0);">JS中Event对象的位置方法</a><br>
         <a href="javascript:void(0);">JS中Event对象的位置方法</a><br>
         <a href="#">JS中Event对象的位置方法</a><br>
         <a href="#">JS中Event对象的位置方法</a><br>
     </div>
     <button>设置</button>
</div>

CSS：

   <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            width: 2000px;
            height: 2000px;
        }
        .box{
            position: relative;
            width: 300px;
            height: 300px;
            border: 10px solid #000;
            margin: 200px 0 0 200px;
            background: skyblue;
        }
        .box1{
            width: 100px;
            height: 100px;
            overflow: auto;
            white-space: nowrap;
            border: 5px solid #fff;
            margin: 80px 0 0 50px;
            padding: 10px;
            background-color: coral;
        }
        button{
            position: absolute;
            right: -10px;
            bottom: -32px;
        }
    </style>

JS：

/* JS--Event对象的位置方法 clientX/clientY||screenX/screenY||pageX/pageY||offsetX/offsetY 
           PS：注意该Event对象点击的范围是offsetWidth/offsetHeight的范围,也就是包括content+padding内边距+border边框 */
            var $box = document.getElementsByClassName("box")[0];
            var $box1 = document.getElementsByClassName("box1")[0];
            var btn = document.getElementsByTagName("button")[0]
            // 解析：offsetWidth为content100 + padding10*2 + border5*2 减去 clientLeft为border的宽度*2 减去 clientWidth当有滚动条时是不包括滚动条的 等于 滚动条的宽度 
            console.log("scroll滚动条宽度:",$box1.offsetWidth - $box1.clientLeft*2 - $box1.clientWidth + "px");

            $box.addEventListener("click",function(e){
                
                // 兼容性: window.event支持IE,e不支持IE;
                var e = e || window.event;
                // 1.clientX/clientY(指当前对象点击的位置相对于当前浏览器窗口左上角的距离,这个属性受滚动条的影响--相对位置)
                console.log("box--clientX",e.clientX);
                console.log("box--clientY",e.clientY);
                // 2.screenX/screenY(指当前对象点击的位置相对于电脑屏幕左上角的绝对位置,注意是屏幕,而不是浏览器窗口--绝对位置)
                console.log("box--screenX",e.screenX);
                console.log("box--screenY",e.screenY);
                // 3.offsetX/offsetY(指当前对象点击的位置绝对于当前位置左上角的位置,
                // 该左上角是border的内角,也就是说clientWidth/clientHeight的左上角,起始点是content+padding内边距的左上角--绝对位置)
                // 兼容性：offsetX/offsetY支持IE,chrome,opera浏览器,不支持低版本的火狐,火狐浏览器对应的是layerX/layerY
                console.log("box--offsetX",e.offsetX || e.layerX);
                console.log("box--offsetY",e.offsetY || e.layerY);
                // 4.pageX/pageY(指当前对象点击的位置绝对于浏览器窗户左上角的距离,不受滚动条影响--绝对位置)
                console.log("box--pageX",e.pageX);
                console.log("box--pageY",e.pageY);
            })
            $box1.onclick = function(ev){
                var ev = ev || window.event;
                // 阻止冒泡和默认事件,存在兼容性,可看我的其他博客有整理
                ev.stopPropagation();
                ev.preventDefault();
                // 1
                console.log("box1--clientX",ev.clientX);
                console.log("box1--clientY",ev.clientY);
                // 2
                console.log("box1--screenX",ev.screenX);
                console.log("box1--screenY",ev.screenY);
                // 3
                console.log("box1--offsetX",ev.offsetX || ev.layerX);
                console.log("box1--offsetY",ev.offsetY || ev.layerX);
                // 4
                console.log("box1--pageX",ev.pageX);
                console.log("box1--pageY",ev.pageY);
            }
            btn.addEventListener("click",function(){
                $box1.style.width = "180px"
            })