<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style>

    body {

      height: 1000px;

    }

  </style>

</head>

<body>

  <script src="common.js"></script>

  <script>

    // e.clientX/e.clientY   鼠标在可视区域中的位置

    //

    // e.pageX/e.pageY       鼠标在页面中的位置 有兼容性问题  从IE9以后才支持

    // pageY = clientY + 页面滚动出去的距离

    document.onclick = function (e) {

      e = e || window.event;

      console.log(getPage(e).pageX);

      console.log(getPage(e).pageY);

    }

    // 获取鼠标在页面的位置，处理浏览器兼容性

    function getPage(e) {

      var pageX = e.pageX || e.clientX + getScroll().scrollLeft;

      var pageY = e.pageY || e.clientY + getScroll().scrollTop;

      return {

        pageX: pageX,

        pageY: pageY

      }

    }

  </script>

</body>

</html>

pageX的兼容性处理2的更多相关文章

  1. pageX的兼容性处理1

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. javascript中一些常见的兼容性问题

    下面是一些Javascript的IE和Firefox(火狐)兼容性的常用例子 1. document.formName.item("itemName") 问题 说明:IE下,可以使 ...

  3. 在ie与火狐的兼容性

    1.在火狐下  document.getElementById("id").textContent可以获取当前获取id下的内容   而在ie下则为:document.getElem ...

  4. js在IE和FF下的兼容性问题

    本文出自前端档案,以作学习参考之用.自己也补充了一些内容 长久以来JavaScript兼容性一直是Web开发者的一个主要问题.在正式规范.事实标准以及各种实现之间的存在的差异让许多开发者日夜煎熬.为此 ...

  5. Javascript事件机制兼容性解决方案

    本文的解决方案可以用于Javascript native对象和宿主对象(dom元素),通过以下的方式来绑定和触发事件: 或者 var input = document.getElementsByTag ...

  6. IE 和Firefox的js兼容性总结

    IE 和Firefox的js兼容性总结 12 August 2010 11:39 Thursday by 小屋 标签: 浏览器 方法 属性 IT 写法 一.函数和方法差异 1 . getYear()方 ...

  7. js兼容性记录

    做BS开发就难免会用到javascript,而每个浏览器对javascript的支持有不同.这就需要我们程序员去兼容他们,不然有些浏览器就无法运行我们的代码.就会造来客户的投诉,如果让BoSS知道了, ...

  8. css兼容性的问题

    https://www.douban.com/note/314793848/ 随意的一个博客ie6的兼容 这个博客比较好 http://blog.csdn.net/chuyuqing/article/ ...

  9. IE和Firefox的Javascript兼容性总结

    长久以来JavaScript兼容性一直是Web开发者的一个主要问题.在正式规范.事实标准以及各种实现之间的存在的差异让许多开发者日夜煎熬.为此,主要从以下几方面差异总结IE和Firefox的Javas ...

随机推荐

  1. 使用Xcode 制作自定义storyboard启动界面，供uniAPP使用。

    1新建项目 想要全屏显示并适应所有尺寸的iPad和iphone 需要用750*1624 2X 和 1125 * 2436 3X大小的图片 这里做完就可以导出文件了 把文件和图片放到一起 见下图 命名规 ...

  2. 比例阀驱动电路后级PWM滤波尖刺如何消除？PWM通过RC低通滤波器模拟DAC

    双头比例阀驱动电路,采用单片机输出2路PWM,分别驱动功率器件(U100的2和4脚),经过U100的8和10脚输出供电电源的高压PWM波形,这个高压PWM经过R104和R114分别采样后经过电流放大器 ...

  3. 【SpringBoot】No 'Access-Control-Allow-Origin' header is present on the requested resource.

    关键字:跨域,Access-Control-Allow-Origin,转码,解码 在做一个前后端分离项目,本来前端项目都可以正常访问后端接口,跨域是这么设置的,接口可以正常访问 @Configurat ...

  4. 【】Nessus安全测试插件编写教程

    Nessus安全测试插件编写教程 作者:Renaud Deraison 翻译:nixe0n 1.怎样编写一个高效的Nessus安全测试插件 在Nessus安全测试系统中, 所有的安全测试都是由ness ...

  5. 目录-Bug集锦

    <Bug集锦>主要是收集一些较有回顾意义的Bug以及Bug的处理思路,方便大家互相学习. 目录 BUG-Nuget包版本不一致导致程序行为与预期不符

  6. visual studio code 修改工具栏风格

    用windows版vscode的同学们是否发现它的工具栏是白色的跟整个界面看起来不太搭调,如下图: 其实要改变标题栏颜色也很简单,点击:文件> 首选项>设置 将 "window. ...

  7. python 面向对象：类方法&静态方法

    一.类方法 1.1 概念和语法说明 类方法就是针对类对象定义的方法.在类方法内部可以直接访问类属性或者调用其他的类方法 语法如下: @classmethod def 类方法名(cls): pass 说 ...

  8. web.xml文件配置模板

    直接贴完整代码,当然,spring的核心控制器依赖包需要通过mean提前配置 <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.// ...

  9. LC 只出现一次的数字

    Given a non-empty array of integers nums, every element appears twice except for one. Find that sing ...

  10. 利用Word2010制作流程图

    利用Word2010制作流程图 原文链接:https://www.toutiao.com/i6483034968225235469/ 一.页面和段落的设置 启动Word2010,打开一个空白文档,并切 ...