码迷,mamicode.com
首页 > Web开发 > 详细

鼠标参数,获取鼠标在网页中的坐标

时间:2018-10-29 22:59:26      阅读:230      评论:0      收藏:0      [点我收藏+]

标签:ie10   style   window   his   size   全局对象   属性   使用   ie9   

1. 事件对象 event

标准浏览器 传递给响应函数

IE 把 event 事件对象作为全局对象 window 的一个属性

 

2. 浏览器滚动条高度

标准浏览器 使用 documen.documentElement.scrollLeft    documen.documentElement.scrollTop 

Safari 等浏览器 使用 window.pageXOffset    window.pageYOffset

没有 doctype 声明的页面 document.body.scrollLeft    document.body.scrollTop

 

3. 获取鼠标在网页中的坐标 = 鼠标在视窗中的坐标 + 浏览器滚动条坐标

// 鼠标事件参数    兼容性封装 Test Already.
var kjfMouse = {
    getEvent : function(e){
        return e || window.event;
    },
    
    getTarget : function(e){
        return this.getEvent(e).target || this.getEvent(e).srcElement;
    },
    
    getClientX : function(e){
        return this.getEvent(e).clientX;
    },
    
    getClientY : function(e){
        return this.getEvent(e).clientY;
    },
    
    // 水平滚动条偏移
    getScrollLeft : function(){
        return  document.documentElement.scrollLeft ||    // 火狐 IE9及以下滚动条是HTML的
                window.pageXOffset ||                     // IE10及以上 window.pageXOffset
                document.body.scrollLeft;                 // chrome 滚动条是body的
    },
    
    // 垂直滚动条偏移
    getScrollTop : function(){
        return  document.documentElement.scrollTop ||    // 火狐 IE9 及以下滚动条是 HTML 的
                window.pageYOffset ||                    // IE10 及以上 window.pageXOffset
                document.body.scrollTop;                 // chrome 滚动条是body的
    },
    
    getPageX : function(e){
        return (this.getEvent(e).pageX)?( this.getEvent(e).pageX ):( this.getClientX(e)+this.getScrollLeft() );
    },
    
    getPageY : function(e){
        return (this.getEvent(e).pageY)?( this.getEvent(e).pageY ):( this.getClientY(e)+this.getScrollTop() );
    }
};

 

鼠标参数,获取鼠标在网页中的坐标

标签:ie10   style   window   his   size   全局对象   属性   使用   ie9   

原文地址:https://www.cnblogs.com/tianxiaxuange/p/9873771.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!