zoukankan      html  css  js  c++  java
  • 鼠标相对于屏幕的位置、鼠标相对于窗口的位置和获取鼠标相对于文档的位置

    一、screenX | screenY用于获取鼠标相对屏幕的位置
    在IE9+和其他主流浏览器,获取鼠标相对屏幕的位置,代码如下:
    function (ev){
       ev.screenX //获取鼠标相对于屏幕左边的距离
       ev.screenY //获取鼠标相对于屏幕顶部的距离
    }
    在IE浏览器下,获取鼠标相对屏幕的位置,代码如下:
    function(){
       window.event.screenX //获取鼠标相对于屏幕左边的距离
       window.event.screenY //获取鼠标相对于屏幕顶部的距离
    }
    兼容所有浏览器情况下,获取鼠标相对屏幕的位置,代码如下:
    function (ev){
       var ev = ev || window.event;
       ev.screenX //获取鼠标相对于屏幕左边的距离
       ev.screenY //获取鼠标相对于屏幕顶部的距离
    }


    二、clientX | clientY 获取鼠标相对于浏览器可视区域的位置
    在IE9+和其他主流浏览器下,获取鼠标相对浏览器可视区域的位置,代码如下:
    function (ev){
       ev.clienX //获取鼠标距离浏览器可视区域左边的距离
       ev.clienY //获取鼠标距离浏览器可视区域顶部的距离
    }
    在ie浏览器下,获取鼠标距离浏览器可视区域的位置,代码如下:
    function (){
       window.event.clienX //获取鼠标距离浏览器可视区域左边的距离
       window.event.clienY //获取鼠标距离浏览器可视区域顶部的距离
    }
    兼容所有浏览器情况下,获取鼠标相对于浏览器可视区域的位置,代码如下
    function (ev){
       var ev = ev || window.event;
       ev.clienX //获取鼠标距离浏览器可视区域左边的距离
       ev.clienY //获取鼠标距离浏览器可视区域顶部的距离
    }


    三、pageX | pageY 获取鼠标相对于文档的位置
    在IE9+和其他主流浏览器下,获取鼠标相对于文档的位置,代码如下:
    function (ev){
       ev.pageX //获取鼠标相对于文档的左边的距离
       ev.pageY //获取鼠标相对于文档的顶部的距离
    }
    在IE8以下浏览器包括IE8浏览器,如何获取鼠标相对于文档的位置??
    获取鼠标相对于浏览器可视区域的位置 + 滚动条移动的距离 = 获取鼠标相对于文档的位置
    解决方法一:
    function(ev){
       try{
          //IE9+ 和 其他主流浏览器
          ev.pageX  //鼠标距离于文档的左面的距离
          ev.pageY  //鼠标距离于文档的顶部的距离
       }catch(err){
          //IE8 IE7 IE6
          window.event.clientX+document.documentElement.scrollLeft  //鼠标距离于文档的左面的距离
          window.event.clientY+document.documentElement.scrollTop   //鼠标距离于文档的顶部的距离
       }
    }
    解决方法二:
    function (ev){
       var ev = ev || window.event;
       var sLeft = document.body.scrollLeft == 0 ? document.documentElement.scrollLeft : document.body.scrollLeft ;
       var sTop = document.body.scrollTop == 0 ? document.documentElement.scrollTop : document.body.scrollTop ;
       ev.clientX + sLeft //获取鼠标距离浏览器可视区域左边的距离
       ev.clientY + sTop  //获取鼠标距离浏览器可视区域顶部的距离
    }
    注释:在Chrome可以通过document.body.scrollLeft,document.body.scrollTop计算出页面滚动位移,而在IE、firefox下可以通过document.documentElement.scrollLeft ,document.documentElement.scrollTop。

  • 相关阅读:
    spring boot 2.0.3+spring cloud (Finchley)2、搭建负载均衡Ribbon (Eureka+Ribbon+RestTemplate)
    spring boot 2.0.3+spring cloud (Finchley)1、搭建服务注册和发现组件Eureka 以及构建高可用Eureka Server集群
    windows下安装redis
    Spring注解@Resource和@Autowired的区别
    spring常用管理bean注解
    maven中package和install命令的区别
    SpringBoot打war包并部署到tomcat下运行
    使用jquery.qrcode生成二维码及常见问题解决方案
    动态生成二维码插件 jquery.qrcode.js
    Notepad++的列编辑功能
  • 原文地址:https://www.cnblogs.com/wangbinweb/p/5632470.html
Copyright © 2011-2022 走看看