1、客户区坐标位置  (相对于客户端视口,而无关浏览器缩放)

clientX与clientY:表示事件发生时鼠标在视口的坐标,不包括页面滚动距离,因此不代表鼠标在页面上的位置。

2、页面坐标位置

pageX与pageY:包括页面滚动距离,代表鼠标在页面上的位置。

无滚动时,clientX==pageX,clientY==pageY

3、屏幕坐标位置

screenX与screenY:鼠标指针相对于整个屏幕的坐标位置

var div=document.getElementById("div");
EventUtil.addHandler(div,"click",function(ev){
ev=EventUtil.getEvent(event);
//没有滚动时,页面坐标=客户区坐标
alert('客户区坐标'+event.clientX+','+event.clientY);
alert('页面坐标'+event.pageX+','+event.pageY);
alert('屏幕坐标'+event.screenX+','+event.screenY);
})

JS事件(四)坐标位置的更多相关文章

  1. js获取鼠标坐标位置兼容多个浏览器

    这个是IE 11 下兼容下视图测试时可用. $(window).bind('beforeunload', function (event) { var _this = this; var x = ev ...

  2. JS事件调试 - 查找HTML元素绑定的事件以及绑定代码所在位置

    日常的网页开发调试工作中,经常需要知道指定的某个网页元素绑定了哪些事件以及绑定代码的位置,下面介绍三种用来跟踪页面中的事件的方法. 1.使用firefox调试 我们可以使用firefox的debug工 ...

  3. js获取div相对屏幕的坐标位置

    1:div相对屏幕的坐标位置 function getDivPosition(div){ var x = div.getBoundingClientRect().left; var y = div.g ...

  4. js点击获取—通过JS获取图片的绝对对坐标位置

    一.通过JS获取鼠标点击时图片的相对坐标位置 源代码如下所示:  <!DOCTYPE html> <html lang="en"> <head> ...

  5. js点击获取—通过JS获取图片的相对坐标位置

    一.通过JS获取鼠标点击时图片的相对坐标位置 源代码如下所示: <!DOCTYPE html> <html lang="en"> <head> ...

  6. C#-WebForm-JS知识:基础部分、BOM部分、DOM部分、JS事件

    一.基础部分: 1.JavaScript 是什么? 是一门脚本语言,是属于弱类型(语言语法很随意),C#是强类型(语言语法非常严格)(李献策lxc) 优点:JS 执行速度快 2.JS 与java有什么 ...

  7. 2018-06-30 js事件

    一.js代码加载的时机 1.DOM加载完毕 -> 将js代码放到body体之下即可: 2.网页资源加载完毕-> $(window).onload(function(){  }); 3.jQ ...

  8. dynamic-css 动态 CSS 库,使得你可以借助 MVVM 模式动态生成和更新 css,从 js 事件和 css 选择器的苦海中脱离出来

    dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...

  9. JS事件

    JS事件:  声明:为了事件对象event跨浏览器兼容: var oEvent==ev||event;      所以在下面用到 event 的地方都用 oEvent 代替  1)doucument的 ...

随机推荐

  1. PHPStorm从入门到精通

    1. 使用phpstorm+xdebug进行调试 首先,安装php的xdebug扩展 查看phpinfo中php的版本,php的安装位数,php的是否线程安全:根据这些下载对应的xdebug.dll ...

  2. ERP行业内幕看了这五个问题全懂了

    ERP系统是现代企业实现信息化管理的必经之路.但很多管理人员或已经在用ERP的人员,其实并不太懂ERP系统是什么意思,有哪些好处等,导致实际使用过程中经常大材小用,或者“英雄无用武之地”.所以,为了更 ...

  3. Apache的commons工具类

    package cn.zhou; import java.io.File; import java.io.IOException; import org.apache.commons.io.FileU ...

  4. LODOOP中的各种边距 打印项、整体偏移、可打区域、内部边距

    Lodop中的打印项内容位置定位,除了打印项本身的top,left值,也会受其他设定或打印机的影响.打印开发,先用虚拟打印机测试出正确结果,然后客户端用打印维护微调常见问题:1.设置打印项相对于纸张居 ...

  5. Add Languages to Your Xamarin Apps with Multilingual App Toolkit

    With Xamarin, you can extend your cross-platform apps with support for native speakers, reaching mar ...

  6. Web API 如何请求基于Basic/Bearer 头的方式 C#

    public void SetBasicAuthHeader(WebRequest request, String userName, String userPassword) { string au ...

  7. BZOJ1004[HNOI2008]Cards——polya定理+背包

    题目描述 小春现在很清闲,面对书桌上的N张牌,他决定给每张染色,目前小春只有3种颜色:红色,蓝色,绿色.他询问Sun有多少种染色方案,Sun很快就给出了答案.进一步,小春要求染出Sr张红色,Sb张蓝色 ...

  8. HDU4035 Maze 【树形DP】【期望DP】

    题目分析: 以前一直不会这个方法, 我好菜啊. 转移分为三个部分,一个是直接成功,一个是转移到E1,还有一个是转移到自己周围的一圈儿点. 如果是叶子那么只能转移到父亲,如果不是叶子可以把非叶子的转移代 ...

  9. 大学jsp实验3include指令的使用

    1.include指令的使用 (1)编写一个名为includeCopyRight.jsp的页面,页面的浏览效果如下: 要求“2016”这个值可以实现动态更新.请写出页面代码: <%@ page ...

  10. CrawlSpider爬取拉钩

    CrawlSpider继承Spider,提供了强大的爬取规则(Rule)供使用 填充custom_settings,浏览器中的请求头 from datetime import datetime imp ...