JS事件(四)坐标位置
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事件(四)坐标位置的更多相关文章
- js获取鼠标坐标位置兼容多个浏览器
这个是IE 11 下兼容下视图测试时可用. $(window).bind('beforeunload', function (event) { var _this = this; var x = ev ...
- JS事件调试 - 查找HTML元素绑定的事件以及绑定代码所在位置
日常的网页开发调试工作中,经常需要知道指定的某个网页元素绑定了哪些事件以及绑定代码的位置,下面介绍三种用来跟踪页面中的事件的方法. 1.使用firefox调试 我们可以使用firefox的debug工 ...
- js获取div相对屏幕的坐标位置
1:div相对屏幕的坐标位置 function getDivPosition(div){ var x = div.getBoundingClientRect().left; var y = div.g ...
- js点击获取—通过JS获取图片的绝对对坐标位置
一.通过JS获取鼠标点击时图片的相对坐标位置 源代码如下所示: <!DOCTYPE html> <html lang="en"> <head> ...
- js点击获取—通过JS获取图片的相对坐标位置
一.通过JS获取鼠标点击时图片的相对坐标位置 源代码如下所示: <!DOCTYPE html> <html lang="en"> <head> ...
- C#-WebForm-JS知识:基础部分、BOM部分、DOM部分、JS事件
一.基础部分: 1.JavaScript 是什么? 是一门脚本语言,是属于弱类型(语言语法很随意),C#是强类型(语言语法非常严格)(李献策lxc) 优点:JS 执行速度快 2.JS 与java有什么 ...
- 2018-06-30 js事件
一.js代码加载的时机 1.DOM加载完毕 -> 将js代码放到body体之下即可: 2.网页资源加载完毕-> $(window).onload(function(){ }); 3.jQ ...
- dynamic-css 动态 CSS 库,使得你可以借助 MVVM 模式动态生成和更新 css,从 js 事件和 css 选择器的苦海中脱离出来
dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...
- JS事件
JS事件: 声明:为了事件对象event跨浏览器兼容: var oEvent==ev||event; 所以在下面用到 event 的地方都用 oEvent 代替 1)doucument的 ...
随机推荐
- JavaScript控制阻止表单提交
1.在表单上使用onSubmit方法 <?php $form = ActiveForm::begin([ 'options'=>[ 'class' => 'form-horizont ...
- linux 地址解析协议 arp
随便转载,保留出处:http://www.cnblogs.com/aaron-agu/ arp –na #查看 arp –s 123.253.68.209 00:19:56:6F:87:D4 #添加
- DBExpress动态连接SQL-Server
procedure TForm1.Button1Click(Sender: TObject);var theCNN : TSQLConnection;//定义连接,要引用 DB, SqlExprbe ...
- 错误:org.apache.catalina.LifecycleException: Protocol handler start failed
org.apache.catalina.LifecycleException: Protocol handler start failed at org.apache.catalina.connect ...
- Angular 2 to Angular 4 with Angular Material UI Components
Download Source - 955.2 KB Content Part 1: Angular2 Setup in Visual Studio 2017, Basic CRUD applicat ...
- 【C/C++】求解线性方程组的雅克比迭代与高斯赛德尔迭代
雅克比迭代: /* 方程组求解的迭代法: 雅克比迭代 */ #include<bits/stdc++.h> using namespace std; ][]; ]; void swapA( ...
- JSON 解析 (一)—— FastJSON的使用
FastJSON是一个高性能.功能完善的json序列化和解析工具库,可使用Maven添加依赖 <dependency> <groupId>com.alibaba</gro ...
- BZOJ3291Alice与能源计划——匈牙利算法+模拟费用流
题目描述 在梦境中,Alice来到了火星.不知为何,转眼间Alice被任命为火星能源部长,并立刻面临着一个严峻的考验.为 了方便,我们可以将火星抽象成平面,并建立平面直角坐标系.火星上一共有N个居民点 ...
- 大学jsp实验3include指令的使用
1.include指令的使用 (1)编写一个名为includeCopyRight.jsp的页面,页面的浏览效果如下: 要求“2016”这个值可以实现动态更新.请写出页面代码: <%@ page ...
- Codeforces510 C. Fox And Names
Codeforces题号:#510C 出处: Codeforces 主要算法:判环+拓扑 难度:4.2 思路分析: 要是把这道题联系到图上就很容易想了. 如何建图?由于最后要求名字满足字典序,所以不妨 ...