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

位置与事件的浏览器兼容

作者: 靈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;
});

相关文章

  • 位置与事件的浏览器兼容

    坐标:获取鼠标的坐标: 获取元素的位置: 滚动轴的高度: 获取元素的css计算后的样式: 在注册事件中:

  • 手写代码

    手写事件侦听器,并要求兼容浏览器 手写事件模型 手写事件代理,并要求兼容浏览器 手写事件触发器,并要求兼容浏览器 ...

  • JS事件兼容 - 列表整理

    事件兼容 备注: IE9及以上浏览器2种事件都支持,IE8及以下只支持IE浏览器列表的事件方法,所以要做浏览器兼容...

  • clipboardjs 剪切板插件

    引入脚本 使用 判断浏览器兼容性浏览器兼容明细 给按钮添加[ 复制 ]事件 给按钮添加[ 剪切 ]事件 复制一段特...

  • 复习笔记之API(17) 移动端常见事件及事件对象

    移动端常见事件及事件对象 触屏事件 移动端浏览器兼容较好,我们不需要考虑以前的浏览器兼容问题,可以放心地使用原生J...

  • 合成事件中e.persist()方法

    合成事件 合成事件对象实例为SyntheticEvent,他是浏览器原生事件的跨浏览器包装器,能够兼容所有浏览器,...

  • 「DOM 编程」事件

    DOM 事件事件流事件注册注册事件取消事件触发事件浏览器兼容型兼容低版本代码实现事件对象属性和方法通用属性和方法阻...

  • 拖动工具泡

    概述 一个拖动工具泡,拖动,点击触发事件,做了移动端与PC端兼容 展示: 涉及的点:1.事件绑定,删除事件,浏览器...

  • 鼠标滚轮事件

    使用js对鼠标滚轮事件进行控制,滚轮事件其中考虑浏览器兼容性问题其中火狐浏览器事件为:"DOMMousescrol...

  • Javascript中事件库的封装

    在浏览器中,对于事件的操作,兼容性主要是存在DOM2级事件里面,标准浏览器是通过addEventListener(...

网友评论

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

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