• JavaScript高级程序设计46.pdf


    鼠标按钮

    只有在主鼠标按钮被单击(或键盘回车键被按下)是才会触发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;

              }

            },

          //省略了其他代码

        };

  • 相关阅读:
    flex居中
    flex
    js将接口返回的数据序列化
    用javascript替换URL中的参数值
    object遍历删除空值
    node代理服务器
    随机生成id
    正则之特殊字符
    H5项目常见问题及注意事项
    node编译C++,比如安装node-gyp失败的问题
  • 原文地址:https://www.cnblogs.com/sdgjytu/p/3783089.html
Copyright © 2020-2023  润新知