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. IWMS后台上传文章,嵌入视频,调用优酷通用代码

    <a href="http://player.youku.com/player.php/sid/XODcxNjM3OTYw/v.swf " target="_bla ...

  2. java静态工厂

    本文摘自:https://www.jianshu.com/p/ceb5ec8f1174 本文略长,所以先来个内容提要 序:什么是静态工厂方法 Effective Java 2.1 静态工厂方法与构造器 ...

  3. Lodop打印控件指定打印任务某几页

    使用Lodop打印控件进行打印开发,有时候一个任务里有多页,例如各种合同之类的,客户端用户在使用过程中,可能有某一页打印后发现需要修改,这时候不必再把整个任务重新打印一遍,只需要打印需要修改的那页重新 ...

  4. 百度编辑器UEditor使用方法

    http://www.cnblogs.com/lionden/archive/2012/07/13/ueditor.html 介绍图片上传:http://uikoo9.com/blog/detail/ ...

  5. 【理论】X理论、Y理论及Z理论

      道格拉斯·麦格雷戈(Douglas Mcgregor)把对人的基本假设作了区分,即X理论和Y理论.X理论认为:人们总是尽可能地逃避工作,不愿意承担责任,因此要想有效地进行管理,实现组织的目标,就必 ...

  6. 包装类接受string 会自动将数字类型string转换成对应得包装类型

  7. avpicture_fill的实现

    简介 avpicture_fill函数将ptr指向的数据填充到picture内,但并没有拷贝,只是将picture结构内的data指针指向了ptr的数据.其实现如下: avpiture_fill av ...

  8. Civil 3D 二次开发 新建CLR项目出现错误C2143

    新建CLR项目出现错误C2143 按照Objectarx Training创建.net混合项目,编译时出现一下错误: 原因不明: 解决方法: 在Stdafx.h文件中添加: #define WIN32 ...

  9. 创建iview框架的项目

    http://www.cnblogs.com/jf-67/p/8479176.html 在使用‘vue init webpack my-project’创建项目时,出现了错误 npm ERR! cod ...

  10. JQ用法

    jQuery简称jq,是一款同prototype一样优秀js开发库类,特别是对css和XPath的支持,使我们写js变得更加方便!如果你不是个js高手又想写出优 秀的js效果,jq可以帮你达到目的!下 ...