zoukankan      html  css  js  c++  java
  • 鼠标位置,元素位置 ,页面宽高,滑动条滚动条距离(带兼容性)(个人笔记)

    获取鼠标位置

      相对于屏幕

    function getMousePos(event) {
           var e = event || window.event;
           return {'x':e.screenX,'y':screenY}//相对于你的电脑屏幕的左上角
    }

      相对浏览器窗口

    function getMousePos(event) {
           var e = event || window.event;
           return {'x':e.clientX,'y':clientY}//相对于浏览器工作区域左上角
    }
    

      相对文档

    function getMousePos(event) {
                var e = event || window.event;
                var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
                var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
                var x = e.pageX || (e.clientX + scrollX);
                var y = e.pageY || (e.clientY + scrollY);
                //alert('x: ' + x + '
    y: ' + y);
                return { 'x': x, 'y': y };
    }
    //page和client属性的区别是:不考虑滚动条滚动的话,是一样的,如果上下滚动的话,pageY表示相对于页面的左上角(随着滚动会隐藏),
    clientY表示相对于浏览器工作区域的左上角,滚动的情况下,pageY会改变,但是clientY不会变,如果左右滑动的话,也是一样的 clientX和pageX的区别 (前提:点击同一个地方)

    页面宽高

     (未完待续)   

  • 相关阅读:
    接口限流算法小记
    mac下操作小记
    Java代理(静态代理、JDK动态代理、CGLIB动态代理)
    关系数据库(RDBMS)小记
    Socket端口复用
    SSH使用小记
    HTTP缓存及其使用
    关于浏览器跨域访问(同源策略)
    awk入门教程
    链路追踪工具之Zipkin学习小记
  • 原文地址:https://www.cnblogs.com/web-chuan/p/9113036.html
Copyright © 2011-2022 走看看