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

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>

 

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>

 


内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://sulao.cn/post/567.html

我要评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。