JS中Event对象点击位置的四大方法
前言总结:
- clientX/clientY(指当前对象点击的位置相对于当前浏览器窗口左上角的距离,这个属性受滚动条的影响–相对位置);
- screenX/screenY(指当前对象点击的位置相对于电脑屏幕左上角的绝对位置,注意是屏幕,而不是浏览器窗口–绝对位置);
- offsetX/offsetY(指当前对象点击的位置绝对于当前位置左上角的位置,该左上角是border的内角,也就是说clientWidth/clientHeight的左上角,起始点是content+padding内边距的左上角–绝对位置);
- pageX/pageY(指当前对象点击的位置绝对于浏览器窗户左上角的距离,不受滚动条影响–绝对位置);
三个兼容性处理:
- 该点击事件事件存在冒泡行为,并且需要处理默认事件,IE存在兼容,此处并未做处理,可以跳转该篇文章进行进一步了解;
- Event对象的点击事件,传入的e存在兼容性,IE支持window.event,传入的e支持除IE外的主流浏览器;
- 关于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"
})