JavaScript中的位置坐标
参考来源
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中的位置坐标的更多相关文章
- JavaScript中的各种宽高以及位置总结
JavaScript中的各种宽高以及位置总结 在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动 ...
- 关于JavaScript中的事件代理
今天面试某家公司Web前端开发岗位,前面的问题回答的都还算凑活,并且又问了一下昨天面试时做的一道数组去重问题的解题思路(关于数组去重问题,可以观赏我前几天写的:http://www.cnblogs.c ...
- 关于JavaScript中的事件代理(例子:ul中无数的li上添加点击事件)
面试题:一个ul中有一千个li,如何给这一千个li绑定一个鼠标点击事件,当鼠标点击时alert出这个li的内容和li的位置坐标xy. 看到这个题目,我们一般首先想到的思路是,for循环,遍历1000次 ...
- javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈
Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...
- javascript中的this与函数讲解
前言 javascript中没有块级作用域(es6以前),javascript中作用域分为函数作用域和全局作用域.并且,大家可以认为全局作用域其实就是Window函数的函数作用域,我们编写的js代码, ...
- JavaScript 中的数据类型
Javascript中的数据类型有以下几种情况: 基本类型:string,number,boolean 特殊类型:undefined,null 引用类型:Object,Function,Date,Ar ...
- javascript中的操作符详解1
好久没有写点什么了,根据博主的技术,仍然写一点javascript新手入门文章,接下来我们一起来探讨javascript的操作符. 一.前言 javascript中有许多操作符,但是许多初学者并不理解 ...
- 掌握javascript中的最基础数据结构-----数组
这是一篇<数据结构与算法javascript描述>的读书笔记.主要梳理了关于数组的知识.部分内容及源码来自原作. 书中第一章介绍了如何配置javascript运行环境:javascript ...
- javascript中变量提升的理解
网上找了两个经典的例子 var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); // 10 var ...
随机推荐
- dos常用命令
进入终端 首先具备一个控制台(命令行提示符窗口)用于输入dos命令: 打开一个控制台的方式: 方式一:开始-------> 所有程序--------->附件----------->命 ...
- IBatis.Net学习笔记五--常用的查询方式
在项目开发过程中,查询占了很大的一个比重,一个框架的好坏也很多程度上取决于查询的灵活性和效率.在IBatis.Net中提供了方便的数据库查询方式. 在Dao代码部分主要有两种方式:1.查询结果为一个对 ...
- sqlalchemy 的 raw sql 方式使用示例
#获取数据库 from sqlalchemy import create_engine db = create_engine("sqlite:///:memory:", echo= ...
- tkinter 改变按钮状态
import tkinter as tk def btn1_change_btn1(event): '''方式一:通过事件控制自己''' if event.widget['state'] == 'no ...
- UI设计师零基础入门到精通精品视频教程【155课高清完整版】
[福吧资源网分享]课程是非常完整的,也是非常零基础的,适合任何学员,有需要的可以下载看看!课程目录:第1章 Adobe Photoshop CS6课时1 Adobe Photoshop CS6入门基础 ...
- ActionBar在Android2.x的实现,类似新版微信界面。
ActionBar完美兼容Android4.x的机型,虽然现在Android2.x的系统越来越少,还有有一部分人使用的仍是2.x的系统,所以我们还得考虑着兼容性问题. 对比图: Test例子与微信的对 ...
- [word]2010中插入公式自动编号并且公式不自动缩小/变小
要实现在word2010中插入公式自动编号,就要用到自动图文集功能,具体操作如下: 1.先制定制表位位置:单击一个空白段落,然后双击标尺线的底部:这会激活"制表位"对话框,如图所示 ...
- iOS开发系列--音频播放(音效和音乐)播放本地的
音频 在iOS中音频播放从形式上可以分为音效播放和音乐播放.前者主要指的是一些短音频播放,通常作为 点缀音频,对于这类音频不需要进行进度.循环等控制.后者指的是一些较长的音频,通常是主音频,对于这些音 ...
- sql server 使用函数辅助查询
函数是所有语言系统下都具备的内部数据处理过程,SQL SERVER也同样内置了许多函数.在SQL SERVER中,函数是由一个或多个T-SQL语句组成的子程序.利用函数可以简化数据的处理操作. 函数分 ...
- 【OpenCV入门教程之二】OPENCV3 开源之美 — 编译源代码、配置opencv_contrib
为什么要配置opencv_contrib? opencv3.0版本 功能更加模块块,一些功能模块不够完善,等足够完善在merge到主分支中,而我们图像识别中要用到的SIFT等算法被封装在xfeactu ...