js鼠标事件、键盘事件实例代码
讲述了：鼠标的哪个按键被点击、当前鼠标的光标坐标是多少、被按下键的unicode码是多少、当前鼠标的光标相对于屏幕的坐标是多少、当前鼠标的光标坐标是多少、shift键是否按下、当前被点击的是哪一个元素
1. 鼠标的哪个按键被点击？
<html>
<head>
<script type="text/javascript">
function whichButton(event)
{
if (event.button==2)
{
alert("你点击了鼠标右键!")
}
else
{
alert("你点击了鼠标左键!")
}
}
</script>
</head> <body onmousedown="whichButton(event)">
<p>请单击你鼠标的左键或右键试试</p>
</body>
</html>
2. 当前鼠标的光标坐标是多少？
<html>
<head>
<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>
3. 被按下键的unicode码是多少？
<html>
<head>
<script type="text/javascript">
function whichButton(event)
{
alert(event.keyCode)
} </script>
</head> <body onkeyup="whichButton(event)">
<p>在此文档中按下你键盘上的某个键看看</p>
</body>
</html>
4. 当前鼠标的光标相对于屏幕的坐标是多少？
<html>
<head> <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>
5. 当前鼠标的光标坐标是多少？
<html>
<head> <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>
6. shift键是否按下?
<html>
<head>
<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>
7. 当前被点击的是哪一个元素？
<html>
<head>
<script type="text/javascript">
function whichElement(e)
{
var targ
if (!e) var e = window.event
if (e.target) targ = e.target
else if (e.srcElement) targ = e.srcElement
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode
var tname
tname=targ.tagName
alert("你点击了 " + tname + "元素")
}
</script>
</head> <body onmousedown="whichElement(event)">
<p>在这里点击看看，这里是p</p> <h3>或者点击这里也可以呀，这里是h3</h3>
<p>你想点我吗？？</p>
<img border="0" src="../myCode/btn.gif" width="100" height="26" alt="pic">
</body> </html>
js鼠标事件、键盘事件实例代码的更多相关文章
- js 鼠标和键盘事件
js 鼠标和键盘事件 鼠标事件 聚焦事件 离焦事件 鼠标单击和双击 鼠标的其他事件 鼠标事件对象 键盘事件 鼠标事件 聚焦事件 <input type="text" id=& ...
- JS 鼠标、键盘事件对象
鼠标事件对象 mouseEvent鼠标事件对象 e.clientX 在可视区的x和y的坐标 e.pageX 在页面文档的X和Y的坐标 <script> docume ...
- js鼠标、键盘事件实例代码
1. 鼠标的哪个按键被点击? <html> <head> <script type="text/javascript"> function wh ...
- Selenium WebDriver 中鼠标和键盘事件分析及扩展(转)
本文将总结 Selenium WebDriver 中的一些鼠标和键盘事件的使用,以及组合键的使用,并且将介绍 WebDriver 中没有实现的键盘事件(Keys 枚举中没有列举的按键)的扩展.举例说明 ...
- C#/winform 自动触发鼠标、键盘事件
要在C#程序中触发鼠标.键盘事件必须要调用windows函数. 一.鼠标事件的触发 1.引用windows函数mouse_event /// <summary> /// 鼠标事件 /// ...
- HTML5 Canvas鼠标与键盘事件
演示HTML5 Canvas鼠标事件,获取Canvas对象上的鼠标坐标,演示键盘事件 通过键盘控制Canvas上对象移动. Canvas对象支持所有的JavaScript的鼠标事件,包括鼠标点击(Mo ...
- lufylegend库 鼠标事件 循环事件 键盘事件
lufylegend库 鼠标事件 循环事件 键盘事件 <!DOCTYPE html> <html lang="en"> <head> <m ...
- OSX 鼠标和键盘事件
本文转自:http://www.macdev.io/ebook/event.html 事件分发过程 OSX 与用户交互的主要外设是鼠标,键盘.鼠标键盘的活动会产生底层系统事件.这个事件首先传递到IOK ...
- JavaScript事件基础-10-2.HTML事件; DOM0级事件; 掌握常用的鼠标与键盘事件 ; 掌握this的指向;
JavaScript事件基础 学习目标 1.掌握什么是事件 2.掌握HTML事件 3.掌握DOM0级事件 4.掌握常用的鼠标与键盘事件 5.掌握this的指向 什么是事件 事件就是文档或浏览器窗口中发 ...
- C# 自动触发鼠标、键盘事件
要在C#程序中触发鼠标.键盘事件必须要调用windows函数. 一.鼠标事件的触发 1.引用windows函数mouse_event /// <summary> /// 鼠标事件 /// ...
随机推荐
- unbuntu下安装flash插件
adobe flash player的官方下载页面为:https://get.adobe.com/cn/flashplayer/ 不过近期通过APT方式以及ubuntu的软件中心都安装不了flashp ...
- eclipse adt 项目依赖，使用git上的项目
从git下载的android工程不能直接导入eclipse,有的项目要依赖这个项目,怎么办呢 好像只能新建一个android项目,然后把libs,res,src,AndroidManifest.xml ...
- InputStreamReader和OutputStreamWriter
public class ClientSocket { public static void main(String args[]) { String host = "1 ...
- Intro to Filtering with Network Monitor 3.0
https://blogs.technet.microsoft.com/netmon/2006/10/17/intro-to-filtering-with-network-monitor-3-0/ h ...
- Linux-Memcache分布式部署方案（magent代理解决单点故障）
Memcached的特点 Memcached作为高速运行的分布式缓存服务器具有以下特点. 1. 协议简单:memcached的服务器客户端通信并不使用复杂的MXL等格式, 而是使用简单的基于文本的协议 ...
- HBase 安装过程记录
http://blog.csdn.net/chenxingzhen001/article/details/7756129 环境: 操作系统Centos 6.4 32-bit 三台节点 ip ...
- Android中突发情况Activity数据的保存和恢复
Android中突发情况Activity数据的保存和恢复 写在前面:在我们的APP使用的过程中,总有可能出现各种手滑.被压在后台.甚至突然被杀死的情况.所以对APP中一些临时数据或关键持久型数据,就需 ...
- ECLIPSE中添加TPTP插件
转自:http://blog.csdn.net/sinboy/article/details/1536625 程序在实际应用当中,大数据量时对系统本身的影响是一个不得不面对的问题. 最早在使用Jbui ...
- LINQ（LINQ to DataSet）
http://www.cnblogs.com/SkySoot/archive/2012/08/21/2649471.html DataTable.Select()方法使用和 SQL 相似的过滤语法从 ...
- linux框架之ibus
框架与具体输入法安装 ibus是一个框架,安装好ibus框架后,只需要安装ibus平台下具体的输入法即可,海风或极点五笔,然后注销当前账户,重新登录,便可添加新安装的输入法 [root@localho ...