首页 > 软件开发 > HTML >

Html网页中怎么检测鼠标按键

来源:互联网 2023-03-16 19:19:19 版权归原作者所有,如有侵权,请联系我们

上篇经验中讲了如何利用按钮改变html网页中的链接及打开方式,接下来我来讲下怎么在网页中检测鼠标按键操作。jXI办公区 - 实用经验教程分享!

工具/原料

  • 网页鼠标按键

方法/步骤

  • 1

    打开文本编辑器或记事本程序,像之前一样先输入html基本结构标签代码jXI办公区 - 实用经验教程分享!

    html>jXI办公区 - 实用经验教程分享!

    body>jXI办公区 - 实用经验教程分享!

    /body>jXI办公区 - 实用经验教程分享!

    /html>jXI办公区 - 实用经验教程分享!

    Html网页中怎么检测鼠标按键?jXI办公区 - 实用经验教程分享!

  • 2

    接下来输入头标签head>,并在头标签之间输入script>标签。jXI办公区 - 实用经验教程分享!

    head>jXI办公区 - 实用经验教程分享!

    script>jXI办公区 - 实用经验教程分享!

    /script>jXI办公区 - 实用经验教程分享!

    /head>jXI办公区 - 实用经验教程分享!

    Html网页中怎么检测鼠标按键?jXI办公区 - 实用经验教程分享!

  • 3

    然后在script>标签之间开始定义鼠标按键检测函数Btntest(),名称可以自己定义。其中Num定义为鼠标键的值,0代表左键;1代表中键;2代表右键。用if循环判断。jXI办公区 - 实用经验教程分享!

    function Btntest(event)jXI办公区 - 实用经验教程分享!

    {jXI办公区 - 实用经验教程分享!

    var Num = event.button;jXI办公区 - 实用经验教程分享!

    if (Num==2)jXI办公区 - 实用经验教程分享!

    {jXI办公区 - 实用经验教程分享!

    alert("已按下鼠标右键!")jXI办公区 - 实用经验教程分享!

    }jXI办公区 - 实用经验教程分享!

    else if(Num==0)jXI办公区 - 实用经验教程分享!

    {jXI办公区 - 实用经验教程分享!

    alert("已按下鼠标左键!")jXI办公区 - 实用经验教程分享!

    }jXI办公区 - 实用经验教程分享!

    else if(Num==1)jXI办公区 - 实用经验教程分享!

    {jXI办公区 - 实用经验教程分享!

    alert("已按下鼠标中键!");jXI办公区 - 实用经验教程分享!

    }jXI办公区 - 实用经验教程分享!

    elsejXI办公区 - 实用经验教程分享!

    {jXI办公区 - 实用经验教程分享!

    alert("已按下" Num "号键,属于其他功能键。");jXI办公区 - 实用经验教程分享!

    }jXI办公区 - 实用经验教程分享!

    }jXI办公区 - 实用经验教程分享!

    Html网页中怎么检测鼠标按键?jXI办公区 - 实用经验教程分享!

  • 4

    点击body>标签中,定义鼠标按下调用Btntest()函数jXI办公区 - 实用经验教程分享!

    body onmousedown="Btntest(event)">jXI办公区 - 实用经验教程分享!

    Html网页中怎么检测鼠标按键?jXI办公区 - 实用经验教程分享!

  • 5

    然后在网页正文中添加一些文字说明,放在段落标签中。jXI办公区 - 实用经验教程分享!

    在网页任意位置点击鼠标的按键,页面会弹出提示框窗口,显示您按下的鼠标按键是左键、中键还是右键,或者是其他鼠标功能键。/jXI办公区 - 实用经验教程分享!

    Html网页中怎么检测鼠标按键?jXI办公区 - 实用经验教程分享!

  • 6

    保存代码内容为html格式,预览网页效果。jXI办公区 - 实用经验教程分享!

    Html网页中怎么检测鼠标按键?jXI办公区 - 实用经验教程分享!

    Html网页中怎么检测鼠标按键?jXI办公区 - 实用经验教程分享!

    Html网页中怎么检测鼠标按键?jXI办公区 - 实用经验教程分享!

  • 6该信息未经许可获取自百度经验
  • 注意事项

    • 如果您喜欢小编的文章,请点击右下角的分享按钮,分享给更多的朋友。

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!jXI办公区 - 实用经验教程分享!


    标签: HTML鼠标

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号