美文网首页
位置与事件的浏览器兼容

位置与事件的浏览器兼容

作者: 靈08_1024 | 来源:发表于2017-05-15 22:47 被阅读13次

    坐标:
    获取鼠标的坐标:

    //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;
    });
    

    相关文章

      网友评论

          本文标题:位置与事件的浏览器兼容

          本文链接:https://www.haomeiwen.com/subject/rcdkxxtx.html