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. 集合之HashMap(含JDK1.8源码分析)

    一.前言 之前的List,讲了ArrayList.LinkedList,反映的是两种思想: (1)ArrayList以数组形式实现,顺序插入.查找快,插入.删除较慢 (2)LinkedList以链表形 ...

  2. python设计模式第七天【建造者模式】

    1. 建造者模式UML图 2.应用场景 (1)专门创建具有符合属性的对象 3.代码实现 #!/usr/bin/env python #! _*_ coding: UTF-8 _*_ from abc ...

  3. eclipse 启动问题Eclipse启动时报错:A Java RunTime Environment (JRE) or Java Development Kit (JDK) must be available in order to run Eclipse. No java virtual machine was found after searching the following locat

    从其他人直接复制的环境导致的问题. 正常双击出现当前异常,以管理员权限启动可以正常启动. ---------------------------Eclipse--------------------- ...

  4. freemarker 设置中文

    在web中添加一段代码 <servlet> <servlet-name>freemarker</servlet-name> <servlet-class> ...

  5. 获取网络图片并显示在picturbox上,byte[]数组转换成Image:

    private void getWebPicture_Click(object sender, EventArgs e) { WebRequest request = WebRequest.Creat ...

  6. bzoj5358

    Problem A. 口算训练Input file: stdinOutput file: stdoutTime limit: 5 secondsMemory limit: 512 megabytes小 ...

  7. 【数学建模】day05-微分方程建模

    很多问题,归结起来是微分方程(组)求解的问题.比如:为什么使用三级火箭发射卫星.阻滞增长人口模型的建立…… MATLAB提供了良好的微分方程求解方案. 一.MATLAB求微分方程的符号解 matlab ...

  8. linux-shell系列3-wafAPI

    #!/bin/bash datestr=`env LANG=en_US.UTF-8 date -u "+%a, %d %b %Y %H:%M:%S GMT"`pwdstr=`ech ...

  9. BZOJ4177Mike的农场——最小割

    题目描述 Mike有一个农场,这个农场n个牲畜围栏,现在他想在每个牲畜围栏中养一只动物,每只动物可以是牛或羊,并且每个牲畜围栏中的饲养条件都不同,其中第i个牲畜围栏中的动物长大后,每只牛可以卖a[i] ...

  10. BZOJ5419[Noi2018]情报中心——线段树合并+虚树+树形DP

    题目链接: [NOI2018]情报中心 题目大意:给出一棵n个节点的树,边有非负边权,并给出m条链,对于每条链有一个代价,要求选出两条有公共边的链使两条链的并的边权和-两条链的代价和最大. 花了一天的 ...