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 相关文章推荐
关于Jquery操作Cookie取值错误的解决方法
Aug 26 Javascript
js完美的div拖拽实例代码
Jan 22 Javascript
jQuery标签替换函数replaceWith()的使用例子
Aug 28 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
Apr 13 Javascript
js实现三张图(文)片一起切换的banner焦点图
Aug 25 Javascript
JS版微信6.0分享接口用法分析
Oct 13 Javascript
Angularjs中使用轮播图指令swiper
May 30 Javascript
vue滚动固定顶部及修改样式的实例代码
May 30 Javascript
Vue路由前后端设计总结
Aug 06 Javascript
JS实现点星星消除小游戏
Mar 24 Javascript
javascript实现计算器功能
Mar 30 Javascript
vue-iview动态新增和删除的方法
Jun 17 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实现把MySQL数据库导出为.sql文件实例(仿PHPMyadmin导出功能)
2014/05/10 PHP
CI框架使用composer安装的依赖包步骤与方法分析
2016/11/21 PHP
php自定义截取中文字符串-utf8版
2017/02/27 PHP
php面向对象的用户登录身份验证
2017/06/08 PHP
php实现微信支付之现金红包
2018/05/30 PHP
laravel 框架执行流程与原理简单分析
2020/02/01 PHP
JS 文件大小判断的实现代码
2010/04/07 Javascript
ExtJS 下拉多选框lovcombo
2010/05/19 Javascript
基于Jquery实现表格动态分页实现代码
2011/06/21 Javascript
onclick与listeners的执行先后问题详细解剖
2013/01/07 Javascript
Jquery 切换不同图片示例代码
2013/12/05 Javascript
js点击出现悬浮窗效果不使用JQuery插件
2014/01/20 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
2017/05/11 Javascript
Vue2路由动画效果的实现代码
2017/07/10 Javascript
three.js实现3D视野缩放效果
2017/11/16 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
2019/09/18 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
2019/09/27 Javascript
WEEX环境搭建与入门详解
2019/10/16 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
2020/09/21 Javascript
Django中模版的子目录与include标签的使用方法
2015/07/16 Python
Python爬虫:通过关键字爬取百度图片
2017/02/17 Python
详解Python3 中的字符串格式化语法
2020/01/15 Python
flask框架渲染Jinja模板与传入模板变量操作详解
2020/01/25 Python
关于Python错误重试方法总结
2021/01/03 Python
python基于opencv实现人脸识别
2021/01/04 Python
钉钉企业内部H5微应用开发详解
2020/05/12 HTML / CSS
ghd法国官方网站:英国最受欢迎的美发工具品牌
2019/04/18 全球购物
实体的生命周期
2013/08/31 面试题
一夜的工作教学反思
2014/02/08 职场文书
股权转让意向书
2014/04/01 职场文书
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
教师作风整改措施思想汇报
2014/10/12 职场文书
高中生自我评价范文2015
2015/03/03 职场文书
难以忽视的真相观后感
2015/06/05 职场文书
《去年的树》教学反思
2016/02/18 职场文书
8g内存用python读取10文件_面试题-python 如何读取一个大于 10G 的txt文件?
2021/05/28 Python