zoukankan      html  css  js  c++  java
  • 鼠标事件-MouseEvent

     

    当鼠标进行某种操作时,就会生成一个event对象,该对象记录着鼠标触发事件时的所有属性。

    可以通过如下方法在google控制台打印出 MouseEvent 对象。

    function mouseDown(e){
        var e = e||event;
        console.log(e)
    }
    window.onload = function (){
        document.getElementsByTagName('body')[0].addEventListener('mousedown',mouseDown,false)
    }

    打印出来的 MouseEvent  如下:

    该对象属性很多,但最常用的 不过 offsetX、offsetY、clientX/clientY、pageX、pageY。各个属性对应的是什么呢? 

    下面列出一下常用的事件

    altkey : 触发鼠标事件时是否alt 按键被按下,如果按下,则返回true,否则返回 fasle。

    button:  事件属性返回一个阿拉伯数字 , 0代表 按下 左键 ,1 代表按下 滚轮 ,2 代表按下 右键。

    offsetX、offsetY :事件属性返回触发事件时 鼠标相对于事件源元素 的X,Y坐标,标准事件没有对应的属性。

    clientX、clientY : 事件属性返回当事件被触发时鼠标指针相对于浏览器页面(或客户区)的水平坐标、垂直坐标。

    pageX、pageY:事件属性返回当事件被触发时鼠标指针相对于整个页面左上角的水平坐标、垂直坐标。

    screenX、screenY:事件属性返回当事件被触发时鼠标位置相对于用户屏幕水水平坐标、垂直坐标,此时的参照点也就是原点是屏幕的左上角。

    好吧,文字叙述总归是很烦,上个经典的图,解释一切 :

    (完)

     

     

     

  • 相关阅读:
    连续子数组的最大和
    孩子们的游戏(圆圈中最后剩下的数)
    左旋转字符串
    业界难题-“跨库分页”的四种方案
    InnoDB意向锁的作用
    Linux下Fork与Exec使用
    minixml的安装教程
    main()函数的形参
    结构体数组初始化
    fork函数详解
  • 原文地址:https://www.cnblogs.com/hanguozhi/p/7382719.html
Copyright © 2011-2022 走看看