JavaScript高级程序设计45.pdf
客户区坐标位置
clientX和clientY保存着鼠标指针在视口中的水平位置坐标和垂直位置坐标(显示出页面的部分叫做客户区,坐标信息不包括页面的滚动距离)
var div=document.getElementById("myDiv");
EventUtil.addHandler(div,"click",function(event){
event=EventUtil.getEvent(event);
alert("Client coordinates:"+event.clientX+","+event.clientY);
});
页面坐标信息
pageX和pageY属性,类似客户区坐标位置,在页面没有滚动的情况下,pageX和pageY属性clientX和clientY相等
IE8及之前版本不支持事件对象的页面坐标,可以使用滚动信息计算出来,document.body(混杂模式)和document.documentElement(标准模式)中的scrollTop和scrollLeft属性
var div=document.getElementById("myDiv");
EventUtil.addHandler(div,"click",function(event){
event=EventUtil.getEvent(event);
var pageX=event.pageX,
pageY=event.pageY;
if(pageX===undefined){
pageX=event.clientX+(document.body.scrollLeft||document.documentElement.scrollLeft);
}
if(pageY===undefined){
pageY=event.clientY+(document.body.scrollTop||document.documentElement.scrollTop);
}
alert("Page coordinates:"+pageX+","+pageY);
});
屏幕坐标位置
相对于整个电脑屏幕的位置screenY和screenX属性
修改键
鼠标事件主要是使用鼠标来触发的,键盘的某些按键也会影响操作
Shift、Ctrl、Alt和Meta(Windows电脑是Windows键,苹果机是Cmd键)
DOM规定了4个属性,表示这些修改建的状态shiftKey、ctrlKey、altKey和metaKey这些属性包含的都是布尔值,被按下则值为true
if(event.shiftKey){
//一些代码
}
IE8及之前版本不支持metaKey属性
相关元素
mouseover和mouseout事件:对于mouseover事件,事件的主目标是获得光标的元素,相关元素是失去光标的元素;对于mouseout,事件的主目标是失去光标的元素,相关元素是获得光标的元素
DOM通过event对象的relatedTarget属性提供了相关元素的信息,这个属性只对于mouseover和mouseout事件才包含值,对于其他事件,值是null
IE8及之前版本不支持relatedTarget属性,但提供了保存相同信息的不同属性,mouseover事件触发时,IE的fromElement属性中保存了相关元素;mouseout事件触发时,IE的toElement属性中保存了相关元素;
把这个跨浏览器取得相关元素的方法添加到EventUtil对象中
var EventUtil={
getRelatedTarget:function(event){
if(event.relatedTarget){
return event.relatedTarget;
}else if(event.toElement){
return event.toElement;
}else if(event.fromElement){
return event.fromElement;
}
else{
return null;
}
},
//省略了其他代码
};
JavaScript高级程序设计45.pdf的更多相关文章
- JavaScript高级程序设计61.pdf
JSON对象 早期的JSON解析器就是使用JavaScript的eval()函数,ECMAScript5对解析JSON的行为做出了规定,定义了全局对象JSON. JSON对象有2个方法:stringi ...
- JavaScript高级程序设计60.pdf
错误处理 try-catch语句 try{ //可能会导致错误的代码 }catch(error){ //在错误发生时如何处理 } error是一个包含着错误信息的对象,它有一个message属性,保存 ...
- JavaScript高级程序设计58.pdf
15章 使用Canvas绘图 略 16章 HTML5脚本编程 HTML5规范了新的HTML标记和JavaScript API,以便简化创建动态Web界面的工作 跨文档消息传递 简称XDM,指来自不同域 ...
- JavaScript高级程序设计57.pdf
表单序列化 首先了解一下浏览器如何将数据发送给服务器 对表单字段的名称和值进行URL编码,使用和号(&)分隔 不发送禁用的表单字段 只发送勾选的复选框和单选按钮 不发送type为“reset” ...
- JavaScript高级程序设计55.pdf
输入模式 HTML5为文本字段新增了pattern属性,这个属性的值是一个正则表达式,用于匹配文本框中的值 例如,只想在允许在文本字段中输入数值 <input type="text&q ...
- JavaScript高级程序设计54.pdf
过滤输入 对于一些浏览器,可以使用正则表达式里的text()测试用户按下的按键,Firefox和safari(3.1版本之前)会对向上向下.退格键和删除键触发keypress事件,在Firefox中, ...
- JavaScript高级程序设计53.pdf
共有的表单字段方法 每个表单字段都有两个方法:focus()和blur(),其中focus()用于将浏览器焦点设置到表单字段,激活表单字段.可以侦听页面的load事件 EventUtil.addHan ...
- JavaScript高级程序设计52.pdf
表单脚本 表单的基础知识 在HTML中,表单是由<form>元素表示的,在Javascript对应的是HTMLFormElement类型,它继承自HTMLElement,因此具有与其他HT ...
- JavaScript高级程序设计50.pdf
hashchange事件 HTML5新增了hashchange事件,以便在URL的参数列表(及URL中“#”号后面的所有字符串)发生变化时通知开发人员,之所以新增这个事件,是因为在Ajax应用中,开发 ...
随机推荐
- MyBatis 拦截器 (实现分页功能)
由于业务关系 巴拉巴拉巴拉 好吧 简单来说就是 原来的业务是 需要再实现类里写 selectCount 和selectPage两个方法才能实现分页功能 现在想要达到效果是 只通过一个方法就可以实现 也 ...
- 学习JS
原型是Js中非常重要的概念,每个函数(在Js里面函数也是对象)都有一个叫prototype即原型)的属性,不过在一般情况下它的值都是null,但它他有一项非常重要的功能就是所以实例都会共享它里面的属性 ...
- C语言实现的顺序表
顺序表是用一段地址连续的存储单元依次存储数据元素的线性结构.顺序表可分为静态存储和动态存储,静态顺序表比较简单,数据空间固定,而动态顺序表可以动态增容,便于存放大量数据,现主要把动态的基本实现一下~此 ...
- CodeFirst数据库迁移小记
打开“程序包管理器控制台”菜单项一.Enable-Migrations -ContextTypeName Code_First_数据迁移.Models.T_DbContext成功后提示:已在项目“Co ...
- android开发环境重装系统之后的配置
前提: 之前配置好的android开发环境:重装系统:压缩了android目录 配置: 安装java环境 安装; 建立JAVA_HOME变量:JAVAHOME添加到path变量 JAVA_HOME=C ...
- LightOj_1364 Expected Cards
题目链接 题意: 一副牌, 每个花色13张牌,加上大小王,共54张. 遇到大小王可以代替其中某种花色. 给定C, D, H, S. 每次抽一张牌, 问抽到C张梅花, D张方块, H张红桃, S张黑桃所 ...
- 使用XmlDocument.SelectNodes遍历xml元素遇到的一个XPathException
使用XmlDocument类时候报错: 未处理的XPathException:需要命名空间管理器或 XsltContext.此查询具有前缀.变量或用户定义的函数. 需要使用XmlNamespaceMa ...
- VS2010皮肤控件介绍
在我们平时使用的各种工具中,如QQ,迅雷,以及各种空间等,都提供了一些换肤功能,可以让我们选择各种我们喜欢的界面.本文就对VS中常用的窗口程序做一个简单的换肤,利用一个dll文件来进行实现. 首先我们 ...
- UVA 1513 Movie collection
#include<stdio.h> #include<string.h> #include<stdlib.h> #define N 200010 #define l ...
- AFNetworking网络请求的get和post步骤
1.首先通过第三方:CocoaPods下载AFNetworking 1.1.先找到要查找的三方库:pod search + AFNetworking 1.2.出来一堆列表页面,选择三方库最新版本命 ...