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

　　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 onmousedown="whichElement(event)">

        <p>在这里点击看看，这里是p</p>

        <h3>或者点击这里，这里是h3</h3>

        <p>你点我吗？？</p>

        <img src="img/18.jpg" width="">

        <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 == ) {

                    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鼠标键盘事件例子的更多相关文章

  1. 由chrome剪贴板问题研究到了js模拟鼠标键盘事件

    写在前面 最近公司在搞浏览器兼容的事情,所有浏览器兼容的问题不得不一个人包了.下面来说一下今天遇到的一个问题吧 大家都知道IE下面如果要获得剪贴板里面的信息的话,代码应该如下所示 window.cli ...

  2. Selenium4.0+Python3系列（四） - 常见元素操作（含鼠标键盘事件）

    一.写在前面 上篇文章介绍的是关于浏览器的常见操作,接下来,我们将继续分享关于元素的常见操作,建议收藏.转发! 二.元素的状态 在操作元素之前,我们需要了解元素的常见状态. 1.常见元素状态判断,傻傻 ...

  3. Linux 模拟 鼠标 键盘 事件

    /************************************************************************ * Linux 模拟 鼠标 键盘 事件 * 说明: ...

  4. Python——pyHook监听鼠标键盘事件

    pyHook包为Windows中的全局鼠标和键盘事件提供回调. 底层C库报告的信息包括事件的时间,事件发生的窗口名称,事件的值,任何键盘修饰符等. 而正常工作需要pythoncom等操作系统的API的 ...

  5. Python - selenium_WebDriver 鼠标键盘事件

    from selenium import webdriver #引入ActionChains类 提供了鼠标的操作方法 from selenium.webdriver.common.action_cha ...

  6. Tkinter 鼠标键盘事件（一）

    一: 鼠标事件 <Button-1>                                                                     鼠标左键单击 ...

  7. js(鼠标键盘拖动事件)

    拖动事件是h5(HTML5的) 1:draggable(true) 2:拖动源 ondragstart ,ondragend 3:目的地 ondraglenter,ondragover,ondragl ...

  8. js浏览器键盘事件控制(转自新浪微博)

    js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...

  9. JS获取键盘事件

    <script type="text/javascript" language=JavaScript charset="UTF-8"> docume ...

随机推荐

  1. [转] babel 教程

    在前端开发领域,浏览器兼容性问题从来不曾消失.除了 CSS,我们还要面对 JavaScript 的兼容性问题. 不同的浏览器讲着不同的 JavaScript 语言,不同的浏览器版本同样讲着不同的 Ja ...

  2. 【bzoj5072】[Lydsy十月月赛]小A的树 树形背包dp

    题解: 比较好想 首先注意到如果最暴力的做法复杂度无法接受 而5000的范围基本是n^2做法了 只使用已经遍历过的点数目和当前子树中的点数目转移我们知道复杂度是n^2的 于是大胆猜测一波同一个节点为根 ...

  3. alpha冲刺2/10

    目录 摘要 团队部分 个人部分 摘要 队名:小白吃 组长博客:hjj 作业博客:拿快递也不能耽搁了软工 团队部分 后敬甲(组长) 过去两天完成了哪些任务 文字描述 github代码管理规范 商家端订单 ...

  4. docker运行php网站程序

    有一个之前的php网站程序需要迁移到K8S,简单调研了下. 基础镜像 官方提供了诸如php:7.1-apache的基础镜像,但是确认必要的扩展,例如gd,当然官方提供了docker-php-ext-i ...

  5. bootstrap下jQuery自动完成的样式调整-【jQuery】

    1. 覆盖层调整 在bootstrap的对话框中,当其中的输入项使用了自动完成控件,则其中下拉框中的内容就会被bootstrap对话框的覆盖层遮盖. 为了能够使后面的自动完成的层显示出来,可以使用如下 ...

  6. python的random()函数

    python 的random函数需要调用 #!/usr/bin/python # -*- coding: UTF-8 -*- import random print( random.randint(1 ...

  7. jQuery懒加载插件 – jquery.lazyload.js简单调用

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  8. HDU3488 Tour KM

    原文链接http://www.cnblogs.com/zhouzhendong/p/8284304.html 题目传送门 - HDU3488 题意概括 给一个n的点m条边的有向图. 然后让你把这个图分 ...

  9. Linux安装Tomcat-Nginx-FastDFS-Redis-Solr-集群——【第四集之安装Linux】

    1,确保Linux镜像的路径存在 2,启动 3,在真实机情况下,进入BIOS修改安装操作系统的路径[记住:虚拟机不需要这一步.] 如果是真实机安装Linux,默认是从硬盘中安装,而不是从光盘.这就需要 ...

  10. radio按钮单选效果

    必须有name,并且是同一值,判断效果可用value值确定