位置与事件的浏览器兼容

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;
});
上一篇下一篇

猜你喜欢

热点阅读