几个常用的JS鼠标键盘事件例子
首先普及一下鼠标左右键值的相关方法：
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鼠标键盘事件例子的更多相关文章
- 由chrome剪贴板问题研究到了js模拟鼠标键盘事件
写在前面 最近公司在搞浏览器兼容的事情,所有浏览器兼容的问题不得不一个人包了.下面来说一下今天遇到的一个问题吧 大家都知道IE下面如果要获得剪贴板里面的信息的话,代码应该如下所示 window.cli ...
- Selenium4.0+Python3系列（四） - 常见元素操作（含鼠标键盘事件）
一.写在前面 上篇文章介绍的是关于浏览器的常见操作,接下来,我们将继续分享关于元素的常见操作,建议收藏.转发! 二.元素的状态 在操作元素之前,我们需要了解元素的常见状态. 1.常见元素状态判断,傻傻 ...
- Linux 模拟 鼠标 键盘 事件
/************************************************************************ * Linux 模拟 鼠标 键盘 事件 * 说明: ...
- Python——pyHook监听鼠标键盘事件
pyHook包为Windows中的全局鼠标和键盘事件提供回调. 底层C库报告的信息包括事件的时间,事件发生的窗口名称,事件的值,任何键盘修饰符等. 而正常工作需要pythoncom等操作系统的API的 ...
- Python - selenium_WebDriver 鼠标键盘事件
from selenium import webdriver #引入ActionChains类 提供了鼠标的操作方法 from selenium.webdriver.common.action_cha ...
- Tkinter 鼠标键盘事件（一）
一: 鼠标事件 <Button-1> 鼠标左键单击 ...
- js(鼠标键盘拖动事件)
拖动事件是h5(HTML5的) 1:draggable(true) 2:拖动源 ondragstart ,ondragend 3:目的地 ondraglenter,ondragover,ondragl ...
- js浏览器键盘事件控制(转自新浪微博)
js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...
- JS获取键盘事件
<script type="text/javascript" language=JavaScript charset="UTF-8"> docume ...
随机推荐
- MVC异常处理（异常捕获）
1.cshtml页面异常 2.Controller异常 3.路由参数异常. 4.页面不存在404 页面不存在404,可以通过配置config来处理 <customErrors mode=&quo ...
- [转] Javascript中理解发布--订阅模式
发布订阅模式介绍 发布---订阅模式又叫观察者模式,它定义了对象间的一种一对多的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时,所有依赖于它的对象都将得到通知. 现实生活中的发布- ...
- Lambda表达式树构建（上）
概述 Lambda是C#常用的语句,采用委托等方式,来封装真实的代码块.Lambda其实就是语法糖,是一个匿名函数,是一种高效的类似于函数式编程的表达式,Lambda简化了开发中需要编写的代码量.它可 ...
- 没有IDE的日子
没有QT Creator,没有VS2008,没有Eclipse,也没有KDevelop,忘掉一切IDE. 好吧,现在我只有Vim了,可我跟Vim不熟. Vim魅力四射,光芒万丈,高高在上,她就是传说中 ...
- SpringBoot Controller接收参数的几种常用方
第一类:请求路径参数 1.@PathVariable 获取路径参数.即url/{id}这种形式. 2.@RequestParam 获取查询参数.即url?name=这种形式 例子 GET http:/ ...
- Python 高级面向对象
一.字段 1.字段包括:普通字段和静态字段,他们在定义和使用中有所区别,而最本质的区别是内存中保存的位置不同. a.普通字段属于对象(实例变量) b.静态字段属于类(类变量) 二.属性 对于属性,有以 ...
- AtCoder Regular Contest 099 (ARC099) E - Independence 二分图
原文链接https://www.cnblogs.com/zhouzhendong/p/9224878.html 题目传送门 - ARC099 E - Independence 题意 给定一个有 $n$ ...
- Machine Learning 算法可视化实现2 - Apriori算法实现
目录 关联分析 Apriori原理 Apriori算法实现 - 频繁项集 Apriori算法实现 - 从频繁项集挖掘关联规则 一.关联分析 关联分析是一种在大规模数据集中寻找有趣关系的任务. 这些关系 ...
- Mex-hdu4747（DP）
链接:http://acm.hdu.edu.cn/showproblem.php?pid=4747 题目大意:给一个含有n个数的序列 ns[1~n],定义函数 mex(l,r)为区间 [l,r] 中未 ...
- HDU 4185 Oil Skimming 【最大匹配】
<题目链接> 题目大意: 给你一张图,图中有 '*' , '.' 两点,现在每次覆盖相邻的两个 '#' ,问最多能够覆盖几次. 解题分析: 无向图二分匹配的模板题,每个'#'点与周围四个方 ...