鼠标按钮

只有在主鼠标按钮被单击(或键盘回车键被按下)是才会触发click事件,对于mousedown和mouseup事件,其event对象存在一个button属性,表示按下或者释放按钮。DOM的button属性可能有3个值:0表示主鼠标按钮、1表示中间鼠标按钮、2表示次鼠标按钮

IE8及之前版本也提供了button属性,这个属性的值与DOM的button属性有很大差异

0:没有按下按钮

1:按下主鼠标按钮

2:按下次鼠标按钮

3:同时按下主次鼠标按钮

4:中间鼠标的按钮

5:同时按下主鼠标按钮和中间鼠标按钮

6:同时按下次鼠标按钮和中间鼠标按钮

7:同时按下鼠标3个按钮

将IE的其它选项转换为这三个按键的任意一个(主按钮作为优先选取的对象)

var EventUtil={

      //省略了其它代码

      getButton:function(event){

          if(document.implementation.hasFeature("MouseEvents","2.0")){

            return event.button;

          }else{

            switch(event.button){

                case 0:

                case 1:

                case 3:

                case 5:

                case 7:

                  return 0;

                case 2:

                case 6:

                  return 2;

                case 4:

                  return 1;

              }

          }

        },

      //省略了其它代码

    };

更多的事件信息

“DOM2级事件”规范在event对象中还提供了detail属性,用于给出有关事件的更多信息,对于鼠标事件来说,detail包含一个数组,表示给定位置上发生了多少次单击,在同一像素上相继发生一次mousedown和mouseup算做一次单击,detail属性从1开始计数,每次单击发生后都会递增,如果移动了位置,则detail会被重置为0;

IE通过下列属性为鼠标事件提供了更多的信息

altLeft:布尔值,表示是否按下了Alt键,如果altLeft的值为true,则altKey也为true

ctrlLeft:布尔值,表示是否按下了Ctrl键,如果ctrlLeft的值为true,则ctrlKey也为true

offsetX:光标相对于目标元素边界的x坐标

offsetY:光标相对于目标元素边界的y坐标

shiftLeft:布尔值,表示是否按下了Shift键,如果shiftLeft的值为true,则shiftKey也为true

这些属性的用处并不大

鼠标滚轮事件

用户通过鼠标滚轮与页面交互时,就会触发mousewheel事件,这个事件可以在任何元素上触发,最终会冒泡到document(IE8)或window(IE9和其他现代浏览器,不包括firefox)

mousewheel事件对于的event对象除包含鼠标事件的所有标准信息,还包含一个特殊的wheelDelta属性,当滚轮向前滚动时wheelDelta是120的倍数,反之是-120的倍数

EventUtil.addHandler(document,"mousewheel",function(event){

        event=EventUtil.getEvent(event);

        alert(event.wheelDelta);

      });

多数情况主要知道鼠标滚轮滚动方向就够了,需要注意的是在Opera9.5之前的版本中,wheelDelta值得正负号是颠倒的

EventUtil.addHandler(document,"mousewheel",function(event){

        event=EventUtil.getEvent(event);

        var delta=(client.engine.opera && client.engine.opera<9.5 ? -event.wheelDelta : event.wheelDelta);

        alert(delta);

      });

Firefox支持一个名为DOMMouseScroll的类似事件,也是在鼠标滚轮滚动时触发,DOMMouseScroll也包含于鼠标事件的所有属性,有关鼠标滚轮的信息保存在detail属性中,滚轮向前滚时,这个值是-3的倍数,向后滚时是3的倍数,可以将DOMMouseScroll添加到页面中的任何元素,该事件会冒泡到window对象

EventUtil.addHandler(window,"DOMMouseScroll",function(event){

        event=EventUtil.getEvent(event);

        alert(event.delta);

      });

将EventUtil对象完善

var EventUtil={

      //省略了其他代码

      getWheelDelta:function(event){

          if(event.wheelDelta){

              return(client.engine.opera && client.engine.opera<9.5 ? -event.wheelDelta : event.wheelDelta);

          }else{

              return -event.detail*40;

          }

        },

      //省略了其他代码

    };

JavaScript高级程序设计46.pdf的更多相关文章

  1. JavaScript高级程序设计61.pdf

    JSON对象 早期的JSON解析器就是使用JavaScript的eval()函数,ECMAScript5对解析JSON的行为做出了规定,定义了全局对象JSON. JSON对象有2个方法:stringi ...

  2. JavaScript高级程序设计60.pdf

    错误处理 try-catch语句 try{ //可能会导致错误的代码 }catch(error){ //在错误发生时如何处理 } error是一个包含着错误信息的对象,它有一个message属性,保存 ...

  3. JavaScript高级程序设计58.pdf

    15章 使用Canvas绘图 略 16章 HTML5脚本编程 HTML5规范了新的HTML标记和JavaScript API,以便简化创建动态Web界面的工作 跨文档消息传递 简称XDM,指来自不同域 ...

  4. JavaScript高级程序设计57.pdf

    表单序列化 首先了解一下浏览器如何将数据发送给服务器 对表单字段的名称和值进行URL编码,使用和号(&)分隔 不发送禁用的表单字段 只发送勾选的复选框和单选按钮 不发送type为“reset” ...

  5. JavaScript高级程序设计55.pdf

    输入模式 HTML5为文本字段新增了pattern属性,这个属性的值是一个正则表达式,用于匹配文本框中的值 例如,只想在允许在文本字段中输入数值 <input type="text&q ...

  6. JavaScript高级程序设计54.pdf

    过滤输入 对于一些浏览器,可以使用正则表达式里的text()测试用户按下的按键,Firefox和safari(3.1版本之前)会对向上向下.退格键和删除键触发keypress事件,在Firefox中, ...

  7. JavaScript高级程序设计53.pdf

    共有的表单字段方法 每个表单字段都有两个方法:focus()和blur(),其中focus()用于将浏览器焦点设置到表单字段,激活表单字段.可以侦听页面的load事件 EventUtil.addHan ...

  8. JavaScript高级程序设计52.pdf

    表单脚本 表单的基础知识 在HTML中,表单是由<form>元素表示的,在Javascript对应的是HTMLFormElement类型,它继承自HTMLElement,因此具有与其他HT ...

  9. JavaScript高级程序设计50.pdf

    hashchange事件 HTML5新增了hashchange事件,以便在URL的参数列表(及URL中“#”号后面的所有字符串)发生变化时通知开发人员,之所以新增这个事件,是因为在Ajax应用中,开发 ...

随机推荐

  1. 正则表达式(.NET)

    元字符: \b  单词的开头或结尾,匹配一个位置 .    匹配除换行符以外的任意字符 \d  匹配一位数字  \d{n} n个数字  \d{a,b} a到b个数字,包含a,b \s  匹配任意空白符 ...

  2. 虚拟机环境Centos如何上网

    虚拟机环境Centos如何上网----------by ruffianfish.痞子鱼 因为我是用的虚拟机的环境,所以一切操作角度从虚拟机出发. 虚拟机环境的优点: 适合新手学习linux 永远不要怕 ...

  3. 那些所谓过滤掉iOS菜鸟的面试题

    一.struct和class的区别<swfit里的array是什么类型,在大量复制时会不会有性能问题.> class是引用类型,struct是值类型 class可以继承类.接口和被继承,s ...

  4. vagrant 设置除默认工项目之外的synced_folder一个坑

    vagrant和host共享的目录,模式是以host主机目录为主,vagrant目录为从,所以记住当你新建同步目录的时候一定要先把vagratn目录文件备份一下,不然会被host目录覆盖

  5. 基于jquery实现的文字淡入淡出效果

    这篇文章介绍了jquery实现的文字淡入淡出效果实例,有需要的朋友可以参考一下 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  6. 服务器端启动soket多线程

    方法一: Socket socket=null try{ ServerSocket serversocket=nwe ServerSocket(8080) while(true){ socket=se ...

  7. Python的面向对象3

    接下来,我们接着讲Python的面向对象,在上一次的博客中,我们详细介绍了类与对象的属性,今天,我们来详细介绍一下面向对象中的方法! 1.定义实例方法 一个实例的私有属性就是以__开头的属性,无法被外 ...

  8. qt 5 小练习 简易画板

    如何在窗口上画线?用一根根线来拼凑图案呢? 想必大家都知道点的集合是线,而线的集合就是很多线啦,用线的集合我们能拼凑出许许多多的图案.于是我就要记录自己跟着老师的学习之路啦: 既然有集合的话,势必要用 ...

  9. CoreGraphics --- 翻转坐标系

    1. 由于CoreGraphics 的坐标系与手机屏幕坐标系的Y轴是相反的, 所以在我们开发的时候, 需要翻转坐标系; - (void)drawRect:(CGRect)rect { CGContex ...

  10. 《无懈可击的Web设计》_灵活的文字

    常见的方法 body{ font-size:12px; } 使用像素单位的优点: 不管使用哪种浏览器或者设备来查看,文字看起来都大小一致. 为什么这么做不是无懈可击的? 以像素为单位设定文字大小之后, ...