码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript的事件对象_鼠标事件

时间:2015-06-21 23:45:00      阅读:291      评论:0      收藏:0      [点我收藏+]

标签:

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

 

 

一、鼠标按钮

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

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

  技术分享

<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>

 

 

 

 

 

 

二、可视区及屏幕坐标

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

  技术分享

<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的事件对象_鼠标事件

标签:

原文地址:http://www.cnblogs.com/LO-ME/p/4592598.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!