zoukankan      html  css  js  c++  java
  • 鼠标事件(二)

    在鼠标事件的事件对象中,相应的保存着与该事件对应的信息。

    • 当鼠标主按钮(默认左键)按下并抬起时,触发click事件,这个信息是固定的。但当发生mousedown和mouseup时,event就会有一个button属性来保存按下或抬起的键。当event.button为0时是主键(左键),为1时是滚轮,为2时是次键(右键)。然而,IE8则保存完全不同的信息而且比较复杂:

      0:没有按下鼠标键

      1:按下鼠标主键

      2:按下鼠标次键

      3:按下鼠标主键和次键

      4:按下鼠标滚轮

      5:按下鼠标主键和滚轮

      6:按钮鼠标次键和滚轮

      7:同时按下主键、次键和滚轮

    由于主流浏览器支持DOM,因此最好把IE8内保存的信息转换成更为简便的DOM信息。

    EventUtil.getButton = function(event){
      if(document.implementation.hasFature('MouseEvents','2.0')){
        return event.button;
      }else{
        switch(event.button){
          case 0:
          case 1:
          case 3:
          case 5:
          case 7:
            return 0;
            break;
          case 2:
          case 6:
            return 2;
            break;
          case 4:
            return 1;
            break;
        }
      }
    };
    • 在很多情况下,获取鼠标的位置也是非常有用的。通过clientX和clientY就可以获取鼠标相对于浏览器视口的横纵坐标:
    EventUtil.addEvent(document,'mousemove',function(event){
      var event = EventUtil.getEvent(event);   document.title = event.clientX+','+event.clientY; });

      通过pageX和pageY获取鼠标指针相对于页面的距离:

    EventUtil.addEvent(document,'mousemove',function(event){
      var event = EventUtil.getEvent(event);
      document.title = event.pageX+','+event.pageY;
    });

      然而IE8并不支持pageX和pageY,这个时候就需要使用鼠标光标相对于视口的距离和页面滚动距离来计算页面距离,当页面没有滚动时,页面距离就和视口距离相等:

    EventUtil.addEvent(document,'mousemove',function(event){
      var event = EventUtil.getEvent(event);
      var pX = event.pageX;
      var pY = Event.pageY;
      if(pX === undefined){
        var sX = document.documentElement.scrollLeft||document.body.scrollLeft;
        pX = event.clientX + sX;
      }
      if(pY === undefined){
        var sY = document.documentElement.scrollTop||document.body.scrollTop;
        pY = event.clientY + sY;
      }
      document.title = pX + ',' + pY;
    });

      通过event对象,还可以获取鼠标指针相对于屏幕的坐标:

    EventUtil.addEvent(document,'mousemove',function(event){
      var event = EventUtil.getEvent(event);
      document.title = event.screenX + ',' + event.screenY;
    });
  • 相关阅读:
    使用pjsip传输已经编码的视频
    xubuntu14.04下编译pjsip及pjsua2 java
    解决 Python.h:没有那个文件或目录 错误的方法
    HIbernate與不支持boolean的數據庫之間的映射
    js数组的操作
    jQuery中ajax的使用与缓存问题的解决方法
    网络游戏中应用可插拔工厂处理消息
    How to Train Triplet Networks with 100K Identities?
    (转)如何用TensorLayer做目标检测的数据增强
    图像超分辨-IDN
  • 原文地址:https://www.cnblogs.com/luoshufang/p/5725795.html
Copyright © 2011-2022 走看看