zoukankan      html  css  js  c++  java
  • 鼠标参数,事件对象,获取鼠标在网页中的坐标

    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() );
        }
    };
    --------小尾巴 ________一个人欣赏-最后一朵颜色的消逝-忠诚于我的是·一颗叫做野的心.决不受人奴役.怒火中生的那一刻·终将结束...
  • 相关阅读:
    Mysql基础3-数据操作语言DML-数据查询语言DQL
    Mysql基础2-数据定义语言DDL
    Mysql基础1-基础语法-字段类型
    php源码建博客5--建库建表-配置文件-错误日志
    PHP基础4--函数-数组
    php源码建博客4--实现MVC结构微型框架
    PHP基础3--文件加载-错误处理
    php源码建博客3--区分平台的MVC结构
    php源码建博客2--实现单入口MVC结构
    php源码建博客1--搭建站点-实现登录页面
  • 原文地址:https://www.cnblogs.com/tianxiaxuange/p/9873771.html
Copyright © 2011-2022 走看看