首页 > 代码库 > 几个常用的JS鼠标键盘事件例子

几个常用的JS鼠标键盘事件例子

2024-09-21 12:35:50   218人阅读

　　首先普及一下鼠标左右键值的相关方法：

　　1、event.x 鼠标横轴 
　　2、event.y 鼠标纵轴 
　　3、event.keycode 键盘值 
　　4、events.button==0 默认。没有按任何按钮。 
　　5、events.button==1 鼠标左键 
　　6、events.button==2 鼠标右键 
　　7、events.button==3 鼠标左右键同时按下 
　　8、events.button==4 鼠标中键 
　　9、events.button==5 鼠标左键和中键同时按下 
　　10、events.button==6 鼠标右键和中键同时按下 
　　11、events.button==7 所有三个键都按下

 

　　下面列举几个网页上常用的JavaScript事件的例子，有的我们平时已经再用，主要操作对象是键盘和鼠标，比如判断鼠标哪个按键被点击、鼠标的光标坐标、被按下键的unicode码是多少、当前鼠标的光标相对于屏幕的坐标是多少、shift键是否按下等，下面我们一一来看具体对应的代码：

一、判断当前网页被点击的是哪一个元素：

<html>
    <head>
        <meta charset="utf-8" />
        <title>被点击的是哪一个元素</title>
    </head>
    <body onm ousedown="whichElement(event)">
        <p>在这里点击看看，这里是p</p>
        <h3>或者点击这里，这里是h3</h3>
        <p>你点我吗？？</p>
        <img src=http://www.mamicode.com/"img/18.jpg" width="300">
        <script type="text/javascript">
            function whichElement(e) {
                var targ;
                // 如果没有传参，默认的事件将会是window.event;那个触发便是那个；
                if(!e) {
                    var e = window.event;
                }
                // 事件具体指向的事件源
                if(e.target) {
                    targ = e.target;
                } else if (e.srcElement) {
                    targ = e.srcElement;
                }
                // defeat Safari bug
                if(targ.nodeType == 3) {
                    targ = targ.parentNode;
                }
                var tname = targ.tagName;
                alert("你点击了 " + tname + "元素")
            }
        </script>
    </body>
</html>

 

二、判断shift键是否按下：

<html>

    <head>
        <title>shift键是否按下?</title>
        <script type="text/javascript">
            function isKeyPressed(event) {
                if(event.shiftKey == 1) {
                    alert("shit键按下了!")
                } else {
                    alert("shit键没有按下!")
                }
            }
        </script>
    </head>

    <body onmousedown="isKeyPressed(event)">
        <p>按下shit键，点击你鼠标的左键</p>
    </body>

</html>

 

三、判断当前鼠标的光标坐标是多少？

<html>
    <head>
        <title>当前鼠标的光标是多少？</title>
        <script type="text/javascript">
            function coordinates(event) {
                x = event.x
                y = event.y
                alert("X=" + x + " Y=" + y)
            }
        </script>
    </head>
    <body onmousedown="coordinates(event)">
        <p>点击你鼠标的左键</p>
    </body>
</html>

 

四、判断当前鼠标光标相对于屏幕坐标是多少？

<html>
    <head>
        <title>鼠标光标相对于屏幕的坐标</title>
        <script type="text/javascript">
            function coordinates(event) {
                x = event.screenX
                y = event.screenY
                alert("X=" + x + " Y=" + y)
            }
        </script>
    </head>
    <body onmousedown="coordinates(event)">
        <p>点击鼠标左键</p>
    </body>
</html>

 

五、获取被按下的键盘任意键的unicode码是多少？

<html>
    <head>
        <title>获取被按下键的unicode码</title>
        <script type="text/javascript">
            function whichButton(event) {
                alert(event.keyCode)
            }
        </script>
    </head>
    <body onkeyup="whichButton(event)">
        <p>请按下键盘上的任意键</p>
    </body>
</html>

 

六、检测获取当前鼠标光标的坐标是多少？

<html>
    <head>
        <title>获取鼠标光标坐标</title>
        <script type="text/javascript">
            function show_coords(event) {
                x = event.clientX
                y = event.clientY
                alert("X 坐标： " + x + ", Y 坐标： " + y)
            }
        </script>
    </head>
    <body onmousedown="show_coords(event)">
        <p>请按下鼠标左键看看！</p>
    </body>
</html>

 

七、判断鼠标的哪个按键被点击？

<html>
    <head>
        <title>检测鼠标的哪个按键被点击？</title>
        <script type="text/javascript">
            function whichButton(event) {
                if(event.button == 2) {
                    alert("你点击了右键!")
                } else {
                    alert("你点了左键!")
                }
            }
        </script>
    </head>
    <body>
        
    </body>
<html>

以上这些方法差不多可以让我么认识鼠标的一下事件了。

几个常用的JS鼠标键盘事件例子


联系
我们