JavaScript Event学习第七章 事件属性


Posted in Javascript onFebruary 07, 2010

当我们想去读一读关于Event的一些资料时,常常会湮没在大量的属性里面,这些属性其中的大多数不能良好的运行在大多数的浏览器。这里有event的兼容性列表。
我不打算给这些属性列个表,因为那些情况实在是太让人晕头了,而且对你的学习也不会有一点点的帮助。在写5段代码前我先要问关于浏览器的5个问题。
1、event的类型(type)是什么?
2、哪一个HTML元素是event的目标呢?
3、哪些键在event发生时被按下了?
4、哪个鼠标键在Event发生时被按下了?
5、在Event发生时鼠标的位置在哪?
最后一个问题我在这里做了非常详尽的解答。
请注意这些代码我做了非常严谨的对象检查。我首先创建跨浏览器的的对事件的访问,然后在使用每一个属性前都做了浏览器支持性的检查。

1、event的类型(type)是什么?
这是一个跨浏览器的有标准答案的问题:使用type属性就可以查看其属性:

function doSomething(e) { 
if (!e) var e = window.event; 
alert(e.type); 
}

2、哪一个HTML元素是event的目标呢?
W3C/Netscape说:target。不对,微软说,是srcElement。这两个属性都返回event发生时的HTML元素。

function doSomething(e) { 
var targ; 
if (!e) var e = window.event; 
if (e.target) targ = e.target; 
else if (e.srcElement) targ = e.srcElement; 
if (targ.nodeType == 3) // defeat Safari bug 
targ = targ.parentNode; 
}

最后两行的代码专门针对Safari的。如果event发生在一个包含文本(text)的元素上,这个文本节点(text node)而不是元素本身就成为了event的目标。因此我们要检查如果目标的nodetype是3(文本节点)。如果是我们就把它移动到父节点上,HTML元素。
即使event被捕获或者冒泡了(bubbles up),target/srcElement属性也依然是最早发生event的元素。
其他的target
还有很多targeting的属性。我在Event Order这篇文章里讨论了currentTarget,在Mouse event这篇文章里讨论了relatedTarget,fromElement和toElement。

3、哪些键在event发生时被按下了?
这个问题相对简单一些。首先从keyCode属性得到该键的代码(a=65)。当你得到了键值以后,你可以通过String.fromCharCode()方法知道实际的键值,如果必要的话。

function doSomething(e) { 
var code; 
if (!e) var e = window.event; 
if (e.keyCode) code = e.keyCode; 
else if (e.which) code = e.which; 
var character = String.fromCharCode(code); 
alert('Character was ' + character); 
}

这里有一些地方可能会造成键盘事件比较难用。比如,kepress事件触发的时间和使用者按下键的时间一样长。然而,大多数浏览器里面keydown的触发时间也和按下的时间一样长。我不确定这是不是一个好的想法,但是就是那样的。

4、哪个鼠标键在Event发生时被按下了?
这里有两个属性可以知道哪个鼠标键被按下了:which和button。请注意这些属性通常不一定在click上起作用。为了保险的探测哪个鼠标键被按下,你最好使用mousedown和mouseup事件。
which是一个古老的Netscape属性。鼠标左键的值是1,中键(滚轮)的值是2,右键的值是3。除了支持上比较薄弱以外没有什么问题,事实上也经常用来检测鼠标按键。
现在button属性能被很好的识别。W3C的标准值如下:
左键 0
中键 1
右键 2
微软的标准值如下:
左键 1
中键 4
右键 2
毫无疑问的微软的标准比W3C的好。0可以表示没有键按下,其他都是不合理的。
另外,只有在微软的模型中按键的值是可以合并使用的,比如5就代表“左键和中键”一起按下。不仅IE6不支持合并,w3c的的模型在理论上也是不能完成的:你永远也不知道左键是不是被按下了。
所以在我看来w3c在定义button上有严重的失误。

右击
幸运的是,通常你想知道右键是否被点击。因为W3C和微软恰好在这个问题上给button的定义值是2,所以你依然可以检测右击。

function doSomething(e) { 
var rightclick; 
if (!e) var e = window.event; 
if (e.which) rightclick = (e.which == 3); 
else if (e.button) rightclick = (e.button == 2); 
alert('Rightclick: ' + rightclick); // true or false 
}

需要注意的是,Macs通常只有一个键,Mozilla给Ctrl-Click的button的值定义为2,所以Ctrl-Click也会打开菜单。ICab 还不支持鼠标button属性,所以你在Opera里面还不能检测右击。
5、在Event发生时鼠标的位置在哪?
鼠标位置这个问题相当的严峻。虽然有不少于6对鼠标坐标的属性,但是仍然没有一个可靠的跨浏览器的方法能找到鼠标的坐标。
下面是这6组坐标:
1、clientX,clientY
2、layerX,layerY
3、offsetX,offsetY
4、pageX,pageY
5、screenX,screenY
6、x,y
我曾经在这里解释过pageX/Y和clientX/Y的问题。
screenX和screenY是唯一一对跨浏览器兼容的属性。他们给出鼠标在整个电脑屏幕上的坐标。不幸的是,仅仅这个信息是远远不够的:你永远也不需要知道鼠标在屏幕的位置--好吧,或者你想在当前的鼠标位置放置一个新的窗口。
其他的三对属性也不重要,看这里的描述。
正确的代码
下面的代码能够正确的检测鼠标的坐标

function doSomething(e) { 
var posx = 0; 
var posy = 0; 
if (!e) var e = window.event; 
if (e.pageX || e.pageY) { 
posx = e.pageX; 
posy = e.pageY; 
} 
else if (e.clientX || e.clientY) { 
posx = e.clientX + document.body.scrollLeft 
+ document.documentElement.scrollLeft; 
posy = e.clientY + document.body.scrollTop 
+ document.documentElement.scrollTop; 
} 
// posx and posy contain the mouse position relative to the document 
// Do something with this information 
}

原文在这里:http://www.quirksmode.org/js/events_properties.html

大家多指教 我的twitter:@rehawk

Javascript 相关文章推荐
js 复制或插入Html的实现方法小结
May 19 Javascript
Extjs显示从数据库取出时间转换JSON后的出现问题
Nov 20 Javascript
jquery 添加节点的几种方法介绍
Sep 04 Javascript
JS实现自适应高度表单文本框的方法
Feb 25 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
Mar 14 Javascript
基于jQuery实现的菜单切换效果
Oct 16 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
Apr 01 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
Apr 12 Javascript
AngularJS实现的base64编码与解码功能示例
May 17 Javascript
基于rollup的组件库打包体积优化小结
Jun 18 Javascript
JavaScript中关于base64的一些事
May 06 Javascript
javascript function(函数类型)使用与注意事项小结
Jun 10 Javascript
JavaScript Event学习第六章 事件的访问
Feb 07 #Javascript
JavaScript Event学习第五章 高级事件注册模型
Feb 07 #Javascript
JavaScript Event学习第四章 传统的事件注册模型
Feb 07 #Javascript
JavaScript Event学习第三章 早期的事件处理程序
Feb 07 #Javascript
JavaScript Event学习第二章 Event浏览器兼容性
Feb 07 #Javascript
JavaScript Event事件学习第一章 Event介绍
Feb 07 #Javascript
jQuery库与其他JS库冲突的解决办法
Feb 07 #Javascript
You might like
php之curl实现http与https请求的方法
2014/10/21 PHP
浅谈PHP匿名函数和闭包
2019/03/08 PHP
HR vs CL BO3 第一场 2.13
2021/03/10 DOTA
JavaScript 比较时间大小的代码
2010/04/24 Javascript
jQuery控制输入框只能输入数值的小例子
2013/03/20 Javascript
基于javascript实现图片滑动效果
2016/05/07 Javascript
AngularJS入门之动画
2016/07/27 Javascript
jQuery stop()用法实例详解
2016/07/28 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
2016/09/17 Javascript
通过bootstrap全面学习less
2016/11/09 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
2016/11/25 Javascript
Ionic + Angular.js实现图片轮播的方法示例
2017/05/21 Javascript
vue.js 微信支付前端代码分享
2018/02/10 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
2018/09/02 Javascript
vue如何安装使用Quill富文本编辑器
2018/09/21 Javascript
JS动态显示倒计时效果
2019/12/12 Javascript
基于JS实现table导出Excel并保留样式
2020/05/19 Javascript
如何手写一个简易的 Vuex
2020/10/10 Javascript
javascript实现电商放大镜效果
2020/11/23 Javascript
python的迭代器与生成器实例详解
2014/07/16 Python
跟老齐学Python之私有函数和专有方法
2014/10/24 Python
利用python程序帮大家清理windows垃圾
2017/01/15 Python
Python3编程实现获取阿里云ECS实例及监控的方法
2017/08/18 Python
Django中URL的参数传递的实现
2019/08/04 Python
解决Jupyter notebook中.py与.ipynb文件的import问题
2020/04/21 Python
python网络编程之五子棋游戏
2020/05/14 Python
python可迭代对象去重实例
2020/05/15 Python
pycharm开发一个简单界面和通用mvc模板(操作方法图解)
2020/05/27 Python
澳大利亚首屈一指的在线购物目的地:Kogan.com
2017/02/02 全球购物
ToysRus日本官网:玩具反斗城
2018/09/08 全球购物
Wiggle美国:英国骑行、跑步、游泳、铁人三项商店
2018/10/27 全球购物
获取邓白氏信用报告:Dun & Bradstreet
2019/01/22 全球购物
造价工程师个人求职信
2013/09/21 职场文书
音乐兴趣小组活动总结
2014/07/07 职场文书
植树节新闻稿
2015/07/17 职场文书
导游词之安徽巢湖
2019/12/26 职场文书