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

　　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键是否按下等，下面我们一一来看具体对应的代码：

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

  1. <html>
  2.     <head>
  3.         <meta charset="utf-8" />
  4.         <title>被点击的是哪一个元素</title>
  5.     </head>
  6.     <body onmousedown="whichElement(event)">
  7.         <p>在这里点击看看，这里是p</p>
  8.         <h3>或者点击这里，这里是h3</h3>
  9.         <p>你点我吗？？</p>
  10.         <img src="img/18.jpg" width="">
  11.         <script type="text/javascript">
  12.             function whichElement(e) {
  13.                 var targ;
  14.                 // 如果没有传参，默认的事件将会是window.event;那个触发便是那个；
  15.                 if(!e) {
  16.                     var e = window.event;
  17.                 }
  18.                 // 事件具体指向的事件源
  19.                 if(e.target) {
  20.                     targ = e.target;
  21.                 } else if (e.srcElement) {
  22.                     targ = e.srcElement;
  23.                 }
  24.                 // defeat Safari bug
  25.                 if(targ.nodeType == ) {
  26.                     targ = targ.parentNode;
  27.                 }
  28.                 var tname = targ.tagName;
  29.                 alert("你点击了 " + tname + "元素")
  30.             }
  31.         </script>
  32.     </body>
  33. </html>

二、判断shift键是否按下：

  1. <html>
  2.  
  3.     <head>
  4.         <title>shift键是否按下?</title>
  5.         <script type="text/javascript">
  6.             function isKeyPressed(event) {
  7.                 if(event.shiftKey == 1) {
  8.                     alert("shit键按下了!")
  9.                 } else {
  10.                     alert("shit键没有按下!")
  11.                 }
  12.             }
  13.         </script>
  14.     </head>
  15.  
  16.     <body onmousedown="isKeyPressed(event)">
  17.         <p>按下shit键，点击你鼠标的左键</p>
  18.     </body>
  19.  
  20. </html>

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

  1. <html>
  2.     <head>
  3.         <title>当前鼠标的光标是多少？</title>
  4.         <script type="text/javascript">
  5.             function coordinates(event) {
  6.                 x = event.x
  7.                 y = event.y
  8.                 alert("X=" + x + " Y=" + y)
  9.             }
  10.         </script>
  11.     </head>
  12.     <body onmousedown="coordinates(event)">
  13.         <p>点击你鼠标的左键</p>
  14.     </body>
  15. </html>

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

  1. <html>
  2.     <head>
  3.         <title>鼠标光标相对于屏幕的坐标</title>
  4.         <script type="text/javascript">
  5.             function coordinates(event) {
  6.                 x = event.screenX
  7.                 y = event.screenY
  8.                 alert("X=" + x + " Y=" + y)
  9.             }
  10.         </script>
  11.     </head>
  12.     <body onmousedown="coordinates(event)">
  13.         <p>点击鼠标左键</p>
  14.     </body>
  15. </html>

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

  1. <html>
  2.     <head>
  3.         <title>获取被按下键的unicode码</title>
  4.         <script type="text/javascript">
  5.             function whichButton(event) {
  6.                 alert(event.keyCode)
  7.             }
  8.         </script>
  9.     </head>
  10.     <body onkeyup="whichButton(event)">
  11.         <p>请按下键盘上的任意键</p>
  12.     </body>
  13. </html>

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

  1. <html>
  2.     <head>
  3.         <title>获取鼠标光标坐标</title>
  4.         <script type="text/javascript">
  5.             function show_coords(event) {
  6.                 x = event.clientX
  7.                 y = event.clientY
  8.                 alert("X 坐标： " + x + ", Y 坐标： " + y)
  9.             }
  10.         </script>
  11.     </head>
  12.     <body onmousedown="show_coords(event)">
  13.         <p>请按下鼠标左键看看！</p>
  14.     </body>
  15. </html>

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

  1. <html>
  2.     <head>
  3.         <title>检测鼠标的哪个按键被点击？</title>
  4.         <script type="text/javascript">
  5.             function whichButton(event) {
  6.                 if(event.button == 2) {
  7.                     alert("你点击了右键!")
  8.                 } else {
  9.                     alert("你点了左键!")
  10.                 }
  11.             }
  12.         </script>
  13.     </head>
  14.     <body>
  15.  
  16.     </body>
  17. <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. [转] Nodejs 进阶：Express 常用中间件 body-parser 实现解析

    写在前面 body-parser是非常常用的一个express中间件,作用是对post请求的请求体进行解析.使用非常简单,以下两行代码已经覆盖了大部分的使用场景. app.use(bodyParser ...

  2. tornado中form表单验证详解

    #!/usr/bin/env python# _*_ coding:utf-8 _*_import tornado.webimport tornado.ioloopimport re class Ba ...

  3. asp.net MVC5为WebAPI添加命名空间的支持

    前言 默认情况下,微软提供的MVC框架模板中,WebAPI路由是不支持Namespace参数的.这导致一些比较大型的项目,无法把WebApi分离到单独的类库中. 本文将提供解决该问题的方案. 微软官方 ...

  4. 做生活的有心人——xxx系统第一阶段总结

    2017秋,桃子已经步入大学三年级了,觉得格外幸运 因为现在,有了学习的动力. 如果你和我一样也是在大学中后部分才意识到,自己是个大人了,思维模式开始转变开始融入一些前所未有的认知,觉得自己渺小得如沧 ...

  5. log4j和logback会互相冲突

    当两个都存在同一个项目的时候,本来应该走log4j的日志可能会走logback,导致日志级别问题等错误. 如果出现日志级别不受配置文件控制,可根据源代码走,找到原因.

  6. Zookeeper的概述、安装部署及选举机制

    一.Zookeeper概述 1.Zookeeper是Hadoop生态的管理者,它致力于开发和维护开源服务器,实现高度可靠的分布式协调. 2.Zookeeper的两大功能: (1)存储数据 (2)监听 ...

  7. P2502 [HAOI2006]旅行

    P2502 [HAOI2006]旅行有些问题光靠直觉是不靠谱的,必须有简单的证明,要么就考虑到所有情况.这个题我想的是要么见最小生成树,要么建最大生成树,哎,我sb了一种很简单的情况就能卡掉在最小生成 ...

  8. ROWNUM = 1 to replace count(*)

    For a long time, I have been using the EXISTS clause to determine if at least one record exists in a ...

  9. JAVAScript：前端模块化开发

    目录 一:前端模块化概要 1.1.模块化概要 1.2.函数封装 1.3.对象封装 1.4.立即执行函数表达式(IIFE) 1.5.模块化规范 1.5.1.CommonJS 1.5.2.AMD((Asy ...

  10. Why Did the Cow Cross the Road III HYSBZ - 4991 -CDQ-逆序数

    HYSBZ - 4991 题意: 第一列 1-n的排列 ,第二列 1-n的排列.  相同数字连边  ,问  有多少组 数字 是有交点的并且 绝对值之差>K思路:处理一下 1-n 在第一列的位置, ...