位置与事件的浏览器兼容
2017-05-15 本文已影响13人
靈08_1024
坐标:
获取鼠标的坐标:
//event为传递的时间对象
//在非IE中为event,在IE中为window.event
function getMousePos(event){
var e = event||window.event;
return{'x':e.pageX,'y':e.pageY};//以文档为参照物的坐标
//return{'x':e.clientX,'y':e.clientY};//以窗口为参照物的坐标
//return{'x':e.screenX,'y':e.screenY};//以屏幕为参照物的坐标
}
//jQuery没有对应的方法,但可以$(event).使用上述属性
获取元素的位置:
//传入一个Element对象
//通过逐级向上叠加左边距离offsetLeft
function getDomPos(e) {
var x = 0, y = 0;
while (e != null) {
x += e.offsetLeft;
y += e.offsetTop;
e = e.offsetParent;
}
return {'x': x, 'y': y};
}
//对应jQuery中的$(e).offset();属性为top,left。
滚动轴的高度:
var top = document.body.clientTop||document.documentElement.clientTop;
//对应jQuery中的$(document).scrollTop();
获取元素的css计算后的样式:
//获取element的左边线宽度(注意样式要使用驼峰属性名)
var left = window.getComputedStyle(element).borderLeftWidth;
//经常会出现得到的长度或者宽度值为auto,就要使用下面的方法
var ecss = element.getBoundingClientRect();
//该值至少有width,height,left,top属性,有需要可以进行加减,都是带px单位的
var height = parseInt(ecss.top)+parseInt(ecss.height);
在注册事件中:
document.addEventListener("click", function (event) {
//获取点击的dom元素
var dom = event.target||event.srcElement;
});