JavaScript的事件对象_鼠标事件

鼠标事件是 Web 上面最常用的一类事件,毕竟鼠标还是最主要的定位设备。那么通过事件对象可以获取到鼠标按钮信息和屏幕坐标获取等。

 

 

一、鼠标按钮

  只有在主鼠标按钮被单击时(常规一般是鼠标左键)才会触发 click 事件,因此检测按钮的信息并不是必要的。

  但对于 mousedown 和 mouseup 事件来说,则在其 event 对象存在一个 button 属性,表示按下或释放按钮。

  JavaScript的事件对象_鼠标事件

<script type="text/javascript">

    window.onload = function(){

        document.onclick = function (evt) {

            var e = evt || window.event;             //实现跨浏览器兼容获取 event 对象

            alert(e.button);

        };

    };

</script>

</head>

<body>

    <input  type="button" value="按钮"/>

</body>

  在绝大部分情况下,我们最多只使用主次中三个单击键,IE 给出的其他组合键一般无法使用上。所以,我们只需要做上这三种兼容即可。

<script type="text/javascript">



    function getButton(evt) {                 //跨浏览器左中右键单击相应

        var e = evt || window.event;

        if (evt) {                 //Chrome 浏览器支持 W3C 和 IE

            return e.button;       //要注意判断顺序

        } else if (window.event) {

            switch(e.button) {

                case 1 :

                    return 0;

                case 4 :

                    return 1;

                case 2 :

                    return 2;

            }

        }

    }

    window.onload = function(){

        document.onmouseup = function(evt){ //调用

            if(getButton(evt) == 0) {

                alert('按下了左键!');

            }else if(getButton(evt) == 1){

                alert('按下了中键!');

            }else if(getButton(evt) == 2){

                alert('按下了右键!' );

            }

        };

    };

</script>

 

 

 

 

 

 

二、可视区及屏幕坐标

  事件对象提供了两组来获取浏览器坐标的属性,一组是页面可视区左边,另一组是屏幕坐标。

  JavaScript的事件对象_鼠标事件

<script type="text/javascript">

    window.onload = function(){

        document.onclick = function (evt) {

            var e = evt || window.event;

            alert(e.clientX + ',' + e.clientY);

            alert(e.screenX + ',' + e.screenY);

        };

    };

</script>

</head>

<body>

    <input  type="button" value="按钮"/>

</body>

 

 

 

 

 

三、修改键

  有时,我们需要通过键盘上的某些键来配合鼠标来触发一些特殊的事件。

  这些键为:Shfit、Ctrl、Alt 和 Meat(Windows 中就是 Windows 键,苹果机中是 Cmd 键),它们经常被用来修改鼠标事件和行为,所以叫修改键。(结合鼠标)

<script type="text/javascript">

    function getKey(evt) {

        var e = evt || window.event;

        var keys = [];

        if (e.shiftKey){

            keys.push('shift'); //给数组添加元素

        }

        if (e.ctrlKey){

            keys.push('ctrl');

        }

        if (e.altKey){

            keys.push('alt');

        }

        

        return keys;

    }

    window.onload = function(){

        document.onclick = function (evt) {

            alert(getKey(evt));

        };

    };

</script>

 

你可能感兴趣的:(JavaScript)