• javascript判断鼠标按键和键盘按键的方法


    在网站前端设计时,通过键盘来控制页面状态的变化,比如up,down,pageUp,pageDown等来进行网站的滚动。目前,html5的发展带来了新的游戏体验,因此按键操作必不可少。

    1.监听鼠标按键。

    任何按键操作必然有个监听者和响应者,因此鼠标按键也不例外。在js事件操作中,onMousedown用来监听鼠标按键操作。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    <!--demo.html-->
    <html>
    <head>
    <title>js判断鼠标左、中、右键哪个被点击-柯乐义</title>
    <script type="text/javascript">
    function mouseClick(event)
    {
        var mouseBtnNo = event.button;
         
        if (mouseBtnNo==2)
        {
            alert("您点击了鼠标右键!")
        }
        else if(mouseBtnNo==0)
        {
            alert("您点击了鼠标左键!")
        }
        else if(mouseBtnNo==1)
        {
            alert("您点击了鼠标中键!");
        }
        else
        {
            alert("您点击了" + mouseBtnNo+ "号键,我不能确定它的名称,你可测试一下");
        }
    }
     
    </script>
    </head>
     
    <body>
    <p>请在文档中点击鼠标。一个消息框会提示出您点击了哪个鼠标按键。</p>
    <div style="height:200px;200px;background-color:#920" onmousedown="mouseClick(event)" >
       <!--click me-->
    </div>
    </body>
     
    </html>

    2.监听键盘按键

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <script type="text/javascript">
    function keyDown() { 
       var value= event.keyCode 
       var key = String.fromCharCode(event.keyCode) 
       alert " 键: " + key + "值: " + value ) 
      
     // document.onkeydown = keyDown;
     //document.body[0].onKeydown = keyDown;
     document.getElementById('canvas').onKeyDown = keyDown;
     </script>

    主流应用范围:在html5中,使用按键来控制游戏中精灵,背景等元素的移动。

    try doing it;

  • 相关阅读:
    vbs小脚本01将文件内txt转录到excel
    MybatisPlus乐观锁Version
    PHP使用pdfparser实现对PDF转换成本文
    php获取图片的主要颜色值RGB
    nginx http跳转到https
    java 获取中文第一个拼音方法
    mysql like查询时区分字母大小写
    mysql 查询用逗号隔开字符串的关键字
    Fiddler 手机抓包
    携程爬虫
  • 原文地址:https://www.cnblogs.com/xiaohong/p/4108137.html
Copyright © 2020-2023  润新知