<!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. tcache BUUCTF gyctf_2020_signin

    Ubuntu18.04的题 用到了两个特性: 一个是 calloc 的特点:不会分配 tcache chunk 中的 chunk 另一个是 tcache 的特点:在分配 fastbin 中的 chun ...

  2. 【HTML响应式项目】成人教育官网前端页面（HTML+CSS+JS实现三端适应）

    这个页面是在校参赛的小组项目,除首页和所有课程页面以外由组内成员编写,发博客纯属记录. 项目源码已上传至码云仓库:https://gitee.com/ynavc/sss 项目演示地址:http://y ...

  3. Java初学者作业——编写 Java 程序，定义 Employee 类以及 HR 类，实现 HR 为 Employee 加薪的功能。

    返回本章节 返回作业目录 需求说明: 编写 Java 程序,定义 Employee 类以及 HR 类,实现 HR 为 Employee 加薪的功能. 实现思路: 定义 Employee 类,并定义属性 ...

  4. Android物联网应用程序开发（智慧城市）—— 购物信息的存储界面开发

    效果: 布局代码: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:an ...

  5. Java 16 中新增的 Stream 接口的一些思考

    这里先提一个题外话,如果想看 JDK 不同版本之间有何差异,增加或者删除了哪些 API,可以通过下面这个链接查看: https://javaalmanac.io/jdk/17/apidiff/11/ ...

  6. Ranger开源贡献统计

    统计一下自己在Ranger开源社区贡献的Issue数量, 开源社区的Issue主要分为New Feature,Bug,Improvement, 这三种都是和代码相关的,会直接修改开源项目的代码库, 还 ...

  7. c# - 实体类和有参无参构造函数的具体写法

    1.前言 与Java基本一模一样,但是rider貌似没有意见生成get和set方法的指令 2.操作 (1)目录 实体源码 namespace ConsoleApp1.entity { public c ...

  8. Java 总结 数据底层原理 【包括 ArrayList、LinkedList、hash table、HashMap、Hashtable、ConcurrentHashMap、hash code、HashSet、LinkedHashMap、LinkedHashSet】

    1.ArrayList (1)底层是由动态数组实现的[使用了List接口]. (2)动态数组是长度不固定,随着数据的增多而变长. (3)如果不指定,默认长度为10,当添加的元素超过当前数组的长度时,会 ...

  9. SpringBoot学习笔记二之Spring整合Mybatis

    原文链接: https://www.toutiao.com/i6803235766274097678/ 在learn-admin-component子工程中加入搭建环境所需要的具体依赖(因为比较长配置 ...

  10. vue js格式化数字为金额格式

    /** * @description 格式化金额 * @param number:要格式化的数字 * @param decimals:保留几位小数 默认0位 * @param decPoint:小数点 ...