参考来源

http://www.cnblogs.com/tugenhua0707/p/4501843.html

screenX、screenY:浏览器屏幕水平、垂直坐标(相对于浏览器内整个屏幕,包括地址栏、书签栏等)

clientX、clientY:页面客户区水平坐标、垂直坐标(不包含滚动部分)

pageX、pageY:页面水平坐标、垂直坐标(包含滚动部分),等于客户区坐标加上滚动部分,示例:

EventUtil.addHandler(btn,'click',function(e){
e = EventUtil.getEvent(e);
var pageX = e.pageX,
pageY = e.pageY;
if(!pageX) {
pageX = e.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
}
if(!pageY) {
pageY = e.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
}
console.log("页面X轴坐标为:"+pageX + " "+ "页面Y轴坐标为:"+pageY);
});

JavaScript中的位置坐标的更多相关文章

  1. JavaScript中的各种宽高以及位置总结

    JavaScript中的各种宽高以及位置总结 在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动 ...

  2. 关于JavaScript中的事件代理

    今天面试某家公司Web前端开发岗位,前面的问题回答的都还算凑活,并且又问了一下昨天面试时做的一道数组去重问题的解题思路(关于数组去重问题,可以观赏我前几天写的:http://www.cnblogs.c ...

  3. 关于JavaScript中的事件代理(例子:ul中无数的li上添加点击事件)

    面试题:一个ul中有一千个li,如何给这一千个li绑定一个鼠标点击事件,当鼠标点击时alert出这个li的内容和li的位置坐标xy. 看到这个题目,我们一般首先想到的思路是,for循环,遍历1000次 ...

  4. javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈

    Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...

  5. javascript中的this与函数讲解

    前言 javascript中没有块级作用域(es6以前),javascript中作用域分为函数作用域和全局作用域.并且,大家可以认为全局作用域其实就是Window函数的函数作用域,我们编写的js代码, ...

  6. JavaScript 中的数据类型

    Javascript中的数据类型有以下几种情况: 基本类型:string,number,boolean 特殊类型:undefined,null 引用类型:Object,Function,Date,Ar ...

  7. javascript中的操作符详解1

    好久没有写点什么了,根据博主的技术,仍然写一点javascript新手入门文章,接下来我们一起来探讨javascript的操作符. 一.前言 javascript中有许多操作符,但是许多初学者并不理解 ...

  8. 掌握javascript中的最基础数据结构-----数组

    这是一篇<数据结构与算法javascript描述>的读书笔记.主要梳理了关于数组的知识.部分内容及源码来自原作. 书中第一章介绍了如何配置javascript运行环境:javascript ...

  9. javascript中变量提升的理解

    网上找了两个经典的例子 var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); // 10 var ...

随机推荐

  1. 支持MVC的代码生成运行效果 C# ASP.NET

    做技术的,你若还不懂MVC的话,你好像是外星球来的一样,或者还生活在远古社会里一样,这几天正好没什么事情干,可以静心学习学习MVC技术,顺便把原先的代码生成器修改了一下,只要数据库里设计好了数据结构, ...

  2. UltraEdit编辑器使用心得之正则表达式篇

    ultraEdit 中通过Ctrl+R 可以快速进行文本替换等处理操作,如果在这中间用一些正则表达式那将帮助NI更高效的进行文字处理操作,相关正则表达式列述如下: % 匹配行首 - 表示搜索字符串必须 ...

  3. Cocos2d-x中使用OpenGL ES2.0编写shader

    这几天在看子龙山人的关于OpenGL的文章,先依葫芦画瓢,能看到些东西,才能慢慢深入了解,当入门文章不错,但是其中遇到的一些问题,折腾了一些时间,为了方便和我一样的小白们,在这篇文章中进行写补充. O ...

  4. mac版beyond compare 4 中对比class文件

    http://www.scootersoftware.com/download.php?zz=moreformats 这个网址中没有mac版本的class文件对比的file format.只能自己造了 ...

  5. SpringMVC使用中遇到的问题总结

    使用的IDE工具是MyEclipse2014, spring版本为3.1.1 在使用Spring MVC时需要修改web.xml配置文件,web.xml默认放在WEB-INF目录下. 1.web.xm ...

  6. DOM(六)事件类型

    对于用户事件类型而言,最常用的是鼠标.键盘.浏览器. 1.鼠标事件: 鼠标的事件都频繁使用,下面例子就测试各种鼠标事件 <script language="javascript&quo ...

  7. angular的DEMO(用来练习和顺便看看)

    inflector(辅助) 将用户输入的字符串转化成驼峰或者空格或者底线的小插件; 这个是一个小的过滤器, 平常也是用不到的, 合格是过滤器的代码: app.filter("inflecto ...

  8. 每天一个linux命令(13):tail 命令

    tail 命令从指定点开始将文件写到标准输出.使用tail命令的-f选项可以方便的查阅正在改变的日志文件,tail -f filename会把filename里最尾部的内容显示在屏幕上,并且不但刷新, ...

  9. Html巩固

    1.html元素都支持全局属性(通用的属性)和事件属性.     a标签:定义一个超文本链接,链接到另一个超文本文件的! button:定义一个点击按钮,按钮是出发当前页面的事件.

  10. navjs

    'use strict';define([ 'jquery'], function($) { var nav = { init : function() { $("#burger-menu& ...