zoukankan      html  css  js  c++  java
  • e.pageX;event.clientX,event.clientY,scrollLeft,clientLeft获取鼠标位置

    示例一: x方向没有滚动

    var mx=0,my=0;
    function mouseMove(ev){Ev=ev||window.event;var mousePos=mouseCoords(Ev);mx=mousePos.x;my=mousePos.y;}
    function mouseCoords(ev){
      if(ev.pageX||ev.pageY){
        return{x:ev.pageX,y:ev.pageY};
      }
      return{x:ev.clientX,y:ev.clientY+$(document).scrollTop()};
    }

     示例二:x方向有滚动:

    function mousePosition(ev){//返回一个类
    if(ev.pageX || ev.pageY){
    return {x:ev.pageX, y:ev.pageY};
    }
    return {
    x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
    y:ev.clientY + document.body.scrollTop - document.body.clientTop
    }
    }
    function mouseMove(ev){
    ev = ev || window.event;
    var mousePos = mousePosition(ev);//mousePos现在为一个类
    document.getElementById('txt').value=mousePos.x+":"+mousePos.y
    }
    document.onmousemove = mouseMove

    注:因为我们要在 MSIE 和其他浏览器下运行,Firefox 和其他浏览器用 event.pageX 和 event.pageY 来表示鼠标相对于文档的位置,如果你有一个 500*500 的窗口并且你的鼠标在绝对中间,那么 pageX 和 pageY  的值都是 250,如果你向下滚动  500, 那么 pageY 将变成 750。
    MSIE 正好相反,IE8及更早版本不支持event.pageX和event.pageY,不过使用客户区坐标和滚动信息可以计算出来。它使用 event.clientX 和 event.clientY 表示鼠标相当于窗口的位置,而不是文档。在同样的例子中,如果你向下滚动500,clientY 依然是 250,因此,我们需要添加 scrollLeft 和 scrollTop 这两个相对于文档的属性。最后,MSIE 中文档并不是从 0,0 开始,而是通常有一个小的边框(通常是 2 象素),边框的大小定义在  document.body.clientLeft 和 clientTop 中,我们也把这些加进去。
     
     
  • 相关阅读:
    dinoql 试用
    dinoql 使用graphql 语法查询javascript objects
    使用git_stats 统计分析git 仓库代码&& 集成webhook
    使用gitstats分析git 仓库代码
    PostGraphile 4.4 发布,支持real time 查询
    cube.js 学习(十)cube 来自官方的学习网站
    Optimize Cube.js Performance with Pre-Aggregations
    cube.js 学习(九)cube 的pre-aggregation
    cube.js 学习(八)backend部署模式
    cube.js 学习(七)cube.js type 以及format 说明
  • 原文地址:https://www.cnblogs.com/mawenying/p/5541374.html
Copyright © 2011-2022 走看看