js中鼠标按键事件和键盘按键事件

keydown,keyup,keypress:属于你的键盘按键

mousedown,mouseup:属于你的鼠标按键

当按钮被按下时,发生 keydown 事件,

keyup是在用户将按键抬起的时候才会触发的,

完整的 key press 过程分为两个部分:1. 按键被按下;2. 按键被松开。

当用户在这个元素上按下鼠标键的时候,发生mousedown

当用户在这个元素上松开鼠标键的时候,发生mouseup

例子

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>

 

运行代码 复制代码 保存代码[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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>

运行代码 复制代码 保存代码[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

3. 被按下键的unicode码是多少?

<html>
<head>
<script type="text/javascript">
function whichButton(event)
{
alert(event.keyCode)
}

</script>
</head>

<body onkeyup="whichButton(event)">
<p>在此文档中按下你键盘上的某个键看看</p>
</body>
</html>

运行代码 复制代码 保存代码[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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>

运行代码 复制代码 保存代码[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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>

运行代码 复制代码 保存代码[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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>

运行代码 复制代码 保存代码[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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>

时间: 2024-09-15 18:53:11

js中鼠标按键事件和键盘按键事件的相关文章

js鼠标按键事件和键盘按键事件用法实例汇总_javascript技巧

本文实例讲述了js鼠标按键事件和键盘按键事件用法.分享给大家供大家参考,具体如下: keydown,keyup,keypress:属于你的键盘按键 mousedown,mouseup:属于你的鼠标按键 当按钮被按下时,发生 keydown 事件, keyup是在用户将按键抬起的时候才会触发的, 完整的 key press 过程分为两个部分:1. 按键被按下:2. 按键被松开. 当用户在这个元素上按下鼠标键的时候,发生mousedown 当用户在这个元素上松开鼠标键的时候,发生mouseup 例子

js中最容易被忽视的事件问题大总结_javascript技巧

什么叫跨平台事件?即在不同的浏览器上执行同一事件,所使用的方法不同. 什么是EventUtil对象?有什么作用?即将所有与事件相关的函数,融合在一起的一个容器,方便管理事件对象,它没有属性.主要处理DOM事件和IE事件的磨合,使其尽可能的相似. 下面我们来看一下DOM和IE之间的对象属性和方法做个对比(这里只指出两者之间不同的属性和方法),主要有以下五大点: DOM属性和方法 IE属性和方法 charcode keycode preventDefault returnValue=false re

Atitit.js的键盘按键事件捆绑and事件调度_javascript技巧

 1. Best的方法还是 objEvtMap[ id+evt ]=function(evt,element) 2. Event bind function bindEvent_4_dataBlock() { var arr=$("#table1 li"); arr.each(function(index, element) { $(element).keypress(function(){ alert('keypress'); }); var id="data_aid_&q

在JavaScript中监听IME键盘输入事件_javascript技巧

输入法应当如何触发键盘事件呢?是每一下击键都触发一次事件,还是选词完毕才触发事件呢?整句输入又该如何触发事件呢?不同的操作系统和不同的浏览器对此有不同的看法.在最糟糕的情况下,用户使用输入法后浏览器就只触发一次 keydown ,之后就没有任何的键盘事件了.这对于 Suggestion 控件的实现来说是个大问题,因为 Suggestion 控件需要监听文本输入框的变化,而事件是最准确也最节省计算资源的做法,如果换成轮询的话性能就可能受到影响. 首先,要监听启用输入法后的击键事件应当使用 keyd

JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器_javascript技巧

废话少说,代码上来: 复制代码 代码如下: document.onkeydown=function() { var EventUtil = {}; EventUtil.getEvent = function(){ if(window.event){return window.event;} else{return EventUtil.getEvent.caller.arguments[0];} } var button = document.getElementById("qw");

Node.js中HTTP模块与事件模块详解_node.js

Node.js的http服务器 通过使用HTTP模块的低级API,Node.js允许我们创建服务器和客户端.刚开始学node的时候,我们都会遇到如下代码: 复制代码 代码如下: var http = require('http'); http.createServer(function (req,res) {     res.end('Hello World\n'); }).listen(3000,"127.0.0.1"); console.log("Server funni

js中键盘事件实例简析_javascript技巧

本文实例分析了js中键盘事件.分享给大家供大家参考.具体分析如下: 该实例效果: 按键盘上的任意一个键,弹出相应的ASCII码,兼容ie,chrome和firefox. 但还是有不少问题: (1)ie和chrome中,一些键没有效果,如上.下.左.右等: (2)而firefox中的向右键,与单引号键,都为39. 具体代码如下: 复制代码 代码如下: <html> <head> <script type="text/javascript">  wind

js中获取键盘事件的简单实现方法_javascript技巧

<script type="text/javascript" language=JavaScript charset="UTF-8"> document.onkeydown=function(event){ var e = event || window.event || arguments.callee.caller.arguments[0]; if(e && e.keyCode==27){ // 按 Esc //要做的事情 } if(

前端-js事件中的keycode,在不同是事件中,數值不一樣

问题描述 js事件中的keycode,在不同是事件中,數值不一樣 document.addEventListener("keypress",function(e){ var ikeyCode=e.keyCode; window.alert("press:"+ikeyCode); }); document.addEventListener("keydown",function(e){ var ikeyCode=e.keyCode; window.a