javascript之键盘与鼠标事件

最新推荐文章于 2023-12-29 16:33:57 发布

车晋强

最新推荐文章于 2023-12-29 16:33:57 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/chejinqiang/article/details/44116747

javascript 专栏收录该内容

22 篇文章

订阅专栏

本文将深入探讨JavaScript中的键盘和鼠标事件，包括如何监听键盘按键和鼠标点击，以及相关事件处理函数的使用，帮助你更好地理解和应用这些基础但重要的交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第十章键盘和鼠标事件处理
键盘和鼠标事件处理功能非常强大，在网页设计中经常用到。这一章将介绍相关的内容。
10.1事件处理
在本节给出一个例子，当用户在Web页面中单击鼠标左键时，程序要能够报告鼠标所在的位置，当和户释放鼠标键时，需要报告鼠标键已经弹起，如果用户在按下三个功能键的同时再按下鼠标键，也应当给出详细的报告。
在实际应用中，鼠标右键对程序控制来说是没有用的，因为浏览器已经预先将其设置为与上下文内容相关的帮助键。
10.1.1 在Netscape浏览器中使用鼠标事件
document.onMouseDown=mouseDownHandler;
document.onMouseUp=mouseUpHandler;
一个Netscape浏览器的Event类型的对象传给鼠标事件的处理函数，可以从该对象中获得鼠标的位置信息以及按键信息，鼠标在该页面中的位置信息存放在属性pageY,pageX,中。Event对象的所有属性如下：
type 事件类型
layerX 在事件发生的层中光标的水平位置，以像素为单位
layerY 在事件发生的层中光标的垂直位置，
pageX 光标在页面中的水平位置
pageY 光标在页面中的垂直位置
screenX 光标在屏幕上的水平位置
screenY 光标在屏幕上的垂直位置
which 被按下的鼠标键或键盘按键的ASC码
modifiers 与鼠标和按键组合按键。
data 一个字符串数组，与拖动事件一起使用，包含被拖动对象的URL
10.1.2 在IE中使用鼠标事件
在IE浏览器中处理鼠标事件是完全不同的，为了在文档中捕捉鼠标事件，必须将鼠标事件写入到body标签中。必须通过查看Event对象的来确定鼠标所在的位置，面Event对象是Window对象的一个成员对象，其属性如下：
altKey alt键按下时为真
shiftKey Shift键按下时为真
ctrlKey Ctrl键按下时为真
button 确定是哪个鼠标键被按下
cancelBubble 表明该事件是不是应沿事件层次向上移
clientX 相对用户区域的X坐标
clientY 相对用户区域的Y坐标
keyCode 按键的代码
offsetX 相对容器的坐标X
offsetY 相对容器的坐标Y
returnValue 事件返回值
screenX 相对屏幕的X
screenY 相对屏幕的Y
fromElement 被移动的元素
sreElement 产生该事件的元素
srcFilter 如果有FilterChange事件发生，则过滤该事件
toElement 正在移动的元素
type 以字符串形式返回事件类型
x 在页面中的X
y 在页面中的Y
reason 数据传输的部署
10.1.5 确定用户使用的是哪一种浏览器
要确定用户使用的是哪一种浏览器，只需检查浏览器的navigator对象即可。该对象有一个名为appName的属性，在IE中的值为Microsoft　Internet　Ｅｘｐｌｏｒｅｒ，而在Netscape中的值为Netscape.
如下为程序的完整代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title></title>
<script type="text/javascript">
document.onMouseDown=mouseDownHandler;
document.onMouseUp=mouseUpHandler;

function mouseDownHandler(e){
if(navigator.appName=="Microsoft Internet Explorer"){
if(window.event.shiftKey&&window.event.ctrlKey){
document.form1.Textbox.value="同时按下Ctrl，Shift键并单击鼠标在"+window.event.x+","+window.event.y;
return;
}
if(window.event.shiftKey){
document.from1.Textbox.value="按下Shift键并单击鼠标在"+window.event.x+","+window.event.y;
return ;
}
if(window.event.ctrlKey){
document.form1.Textbox.value="按下Ctrl键并单击鼠标在"+window.event.x+","+window.event.y;
return;
}
if(window.event.altKey){
document.form1.Textbox.value="按下Alt键并单击鼠标在"+window.event.x+","+window.event.y;
return;
}
document.form1.Textbox.value="单击鼠标左键在"+window.event.x+","+window.event.y;
}
if(navigator.appName=="Netscape"){
switch(e.modifiers){
case 0:document.form1.Textbox.value="单击鼠标左键在"+e.pageX+","+e.pageY;break;
case 2:document.form1.Textbox.value="按下Ctrl键并且单击鼠标左键在"+e.pageX+","+e.pageY;break;
case 4:document.form1.Textbox.value="按下Shift键并且单击鼠左键在"+e.pageX+","+e.pageY;break;
case 6:document.form1.Textbox.value="按下Ctrl和Shift键的同时单击鼠标左键在"+e.pageX+","+e.pageY;
break;
case 1:document.form1.Textbox.value="按下Alt键的同时单击鼠标左键在"+e.pageX+","+e.pageY;
}
}
}
function mouseUpHandler(e){
if(navigator.appName=="Microsoft Internet Explorer"){
if(window.event.shiftKey&&window.event.ctrlKey){
document.form1.Textbox.value="同时按下Ctrl，Shift键并单击鼠标在"+window.event.x+","+window.event.y;
return;
}
if(window.event.shiftKey){
document.from1.Textbox.value="按下Shift键并松开鼠标在"+window.event.x+","+window.event.y;
return ;
}
if(window.event.ctrlKey){
document.form1.Textbox.value="按下Ctrl键并松开鼠标在"+window.event.x+","+window.event.y;
return;
}
if(window.event.altKey){
document.form1.Textbox.value="按下Alt键并松开鼠标在"+window.event.x+","+window.event.y;
return;
}
document.form1.Textbox.value="松开鼠标左键在"+window.event.x+","+window.event.y;
}
if(navigator.appName=="Netscape"){
switch(e.modifiers){
case 0:document.form1.Textbox.value="松开鼠标左键在"+e.pageX+","+e.pageY;break;
case 2:document.form1.Textbox.value="按下Ctrl键并且松开鼠标左键在"+e.pageX+","+e.pageY;break;
case 4:document.form1.Textbox.value="按下Shift键并且松开鼠左键在"+e.pageX+","+e.pageY;break;
case 6:document.form1.Textbox.value="按下Ctrl和Shift键的同时松开鼠标左键在"+e.pageX+","+e.pageY;
break;
case 1:document.form1.Textbox.value="按下Alt键的同时单击鼠标左键在"+e.pageX+","+e.pageY;
}
}
}

//-->
</script>
</head>

<body onmousedown="mouseDownHandler();" onmouseup="mouseUpHandler();">
<center>
<form name=form1>
<h1>鼠标事件处理示例</h1><br>
<h2>请按Shift或Ctrl或Alt再单击鼠标左键</h2><br>
<a href="#" onmouseover="mouseDownHandler();"onmouseout="mouseUpHandler();">请将鼠标移到此链接</a>
<br><br>
<input type="text" name="Textbox" size=60>
</form>

</center>

</body>
</html>
10.2 页面预览
在有些网页上会看到这样的效果：当鼠标移至某个超链接时，会在页面的位置显示要链接页面的缩略图，本节就介绍这种效果的实现方法，在页面中显示5个超级链接和一幅图像，如果用户将鼠标移至某个超级链接上时，页面中的图像将用链接页面的缩略图来显示，如果将鼠标移至另一超级链接上时，将显示新的链接页面的缩略图。
代码如下：
<html>

<head>

<title>超级链接页面预览</title>

</head>

<body>
<center>
<form name="form1">
<h1>将光标移至超链接上查看页面预览</h1>
<a href="example1.html" name=link1 onmouseover="link1over()">这是链接一</a><br><br>
<a href="#" name=link2 onmouseover="link2over()">这是链接二</a><br><br>
<a href="#" name=link3 onmouseover="link3over()">这是链接三</a><br><br>
<a href="#" name=link4 onmouseover="link4over()">这是链接四</a><br><br>
<a href="#" name=link5 onmouseover="link5over()">这是链接五</a><br><br>
<img name="img1" src="391.jpg" >
</form>
</center>
<script type="text/javascript">

</script>
</body>

</html>
10.3 图像切换
本节将要展示这样一种效果，页面中显示一幅图像，当鼠标移动到该图像上时，程序将该图像替换为另一幅图像。当鼠标离开时，又恢复为原来的图像。尽管在超级链接上，Netscape Navigator浏览器支持mouseover,mouseout,但是在图像上支持。为此，可以将图像嵌入到一个空链接上。从而让鼠标事件可以被调用。
<html>

<head>

<title></title>

</head>

<body>
<center>
<form name=form1>
<h1>移动鼠标进行切换</h1>
<a href="" name=link1 onmouseover="imgover()" onmouseout="imgout()">
<img name="img1" src="400.jpg" >
</a>
</form>
</center>
<script language="javascript">

</script>
</body>

</html>
10.4 接受键盘输入
在本节将创建这样一个接受键盘输入的例子，当用户键入文本时，字符将在文本框中显示出来。文本框没有焦点属性，因此文本框并非亲读取按键。一量用户按下按键，程序将直接读取。并将其放入到文本框。
10.4.2 在NetScape中读取按键
对于NetScapt浏览器，使用enent对象的which属性来读取按键的ASC码值。然后要转换该按键的代码，使其可以在文本框中显示，可以使用unescape()方法来实现些功能，该方法的参数是"%"加上按键的十六进制ASC码。且该方法将此字符串转换成一个字符，这样一来。就必须将按键代码表示为字符串格式的十六进制，这里使用Number对象的toString()方法来实现。
10.4.3 在IE浏览器中读取按键
在IE浏览器中，可以通过window.evet对象的keyCode属性来读取按键，通过使用IE浏览器中String类的fromCharCode()方法，可以将按键转换成字符串，并将其值存入inString字符串。然后，再像前面那样，将该字符串在文本框中显示出来。
代码如下：
<html>

<head>

<title></title>

</head>

<body onkeypress="keyPress()">
<center>
<form name=form1>
<h1>接收键盘输入实例</h1>
<h7>请随意在下面的文本框中输入一些字符</h7>
<br><br>
<input name="textbox" bype="text" size=40>
</form>
</center>
<script type="text/javascript">

</script>
</body>

</html>
10.5 用鼠标点亮文本
在网络中经常会看到，当鼠标移动到某页面上的超级链接时，链接的文字会变大，颜色也随之变化，这种效果在IE中常见。本节介绍这种效果的实现方法。代码如下：
<html>

<head>

<title></title>

</head>

<body>
<center>
<form name="form1">
<h1>移动鼠标至超级链接以查看效果</h1>
<a href="#" name="link1" onmouseover="link1over()" onmouseout="link1out()">这是链接一</a>
</form>
</center>
<script type="text/javascript">
function link1over(){
link1.style.color="red";
link1.style.fontSize=36;
}
function link1out(){
link1.style.color="black";
link1.style.fontSize=16;
}
</script>
</body>

</html>
10.6 鼠标根随
鼠标跟随产效果也是网页中经常见到的一种效果，实现这种效果的关键是要获取鼠取鼠标的当前位置坐标。并与要跟随的图片，文字所在<div>的坐标关联在一起。这样，当鼠标位置发生变化时，要跟随的位置也发生变化。
10.6.1 图片跟随鼠标
10.7 鼠标感应
弹出警告框
经常可以见到在页面上显示一段文字，当鼠标指向文字时，会弹出一个警告框。实现这种效果的方法非常简单，。
渐显图片
看起来很模糊的图片，鼠标指向该图片后，立刻变清晰。要实现这种效果，需要获取鼠标的。代码如下：
<html>
<head></head>

<body>
<h1>鼠标感应。</h1>
<img src="398.jpg" style="filter:alpha(opacity=20)" onmouseover="makevisible(this,0);" onmouseout="makevisible(this,1)">
<script language="javascript">
function makevisible(cur,which){
if(which==0)
cur.filters.alpha.opacity=100;
else
cur.filters.alpha.opacity=20;
}
</script>
</body>
</html>
10.10禁用鼠标右键菜单
经常可以见到在有的网页上，当单击鼠标右键时，或者没有任何反应，或者弹出一个警告框。代码如下：
<html>
<head></head>
<body onmousedown="click()">
<h1>禁用鼠标右键菜单</h1>
<script language="javascript">
function click(){
if(event.button==2){
alert("你想看什么");
}
}
document.onmousedown=click;
</script>
</body>

</html>

<!--鼠标事件处理-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title></title>
<script  type="text/javascript">
document.onMouseDown=mouseDownHandler;
document.onMouseUp=mouseUpHandler;

function mouseDownHandler(e){
if(navigator.appName=="Microsoft Internet Explorer"){
if(window.event.shiftKey&&window.event.ctrlKey){
document.form1.Textbox.value="同时按下Ctrl，Shift键并单击鼠标在"+window.event.x+","+window.event.y;
return;
}
if(window.event.shiftKey){
document.from1.Textbox.value="按下Shift键并单击鼠标在"+window.event.x+","+window.event.y;
return ;
}
if(window.event.ctrlKey){
document.form1.Textbox.value="按下Ctrl键并单击鼠标在"+window.event.x+","+window.event.y;
return;
}
if(window.event.altKey){
document.form1.Textbox.value="按下Alt键并单击鼠标在"+window.event.x+","+window.event.y;
return;
}
document.form1.Textbox.value="单击鼠标左键在"+window.event.x+","+window.event.y;
}
if(navigator.appName=="Netscape"){
switch(e.modifiers){
case 0:document.form1.Textbox.value="单击鼠标左键在"+e.pageX+","+e.pageY;break;
case 2:document.form1.Textbox.value="按下Ctrl键并且单击鼠标左键在"+e.pageX+","+e.pageY;break;
case 4:document.form1.Textbox.value="按下Shift键并且单击鼠左键在"+e.pageX+","+e.pageY;break;
case 6:document.form1.Textbox.value="按下Ctrl和Shift键的同时单击鼠标左键在"+e.pageX+","+e.pageY;
break;
case 1:document.form1.Textbox.value="按下Alt键的同时单击鼠标左键在"+e.pageX+","+e.pageY;
}
}
}
function mouseUpHandler(e){
if(navigator.appName=="Microsoft Internet Explorer"){
if(window.event.shiftKey&&window.event.ctrlKey){
document.form1.Textbox.value="同时按下Ctrl，Shift键并单击鼠标在"+window.event.x+","+window.event.y;
return;
}
if(window.event.shiftKey){
document.from1.Textbox.value="按下Shift键并松开鼠标在"+window.event.x+","+window.event.y;
return ;
}
if(window.event.ctrlKey){
document.form1.Textbox.value="按下Ctrl键并松开鼠标在"+window.event.x+","+window.event.y;
return;
}
if(window.event.altKey){
document.form1.Textbox.value="按下Alt键并松开鼠标在"+window.event.x+","+window.event.y;
return;
}
document.form1.Textbox.value="松开鼠标左键在"+window.event.x+","+window.event.y;
}
if(navigator.appName=="Netscape"){
switch(e.modifiers){
case 0:document.form1.Textbox.value="松开鼠标左键在"+e.pageX+","+e.pageY;break;
case 2:document.form1.Textbox.value="按下Ctrl键并且松开鼠标左键在"+e.pageX+","+e.pageY;break;
case 4:document.form1.Textbox.value="按下Shift键并且松开鼠左键在"+e.pageX+","+e.pageY;break;
case 6:document.form1.Textbox.value="按下Ctrl和Shift键的同时松开鼠标左键在"+e.pageX+","+e.pageY;
break;
case 1:document.form1.Textbox.value="按下Alt键的同时单击鼠标左键在"+e.pageX+","+e.pageY;
}
}
}



//-->
</script>
</head>

<body onmousedown="mouseDownHandler();" onmouseup="mouseUpHandler();">
<center>
<form name=form1>
<h1>鼠标事件处理示例</h1><br>
<h2>请按Shift或Ctrl或Alt再单击鼠标左键</h2><br>
<a href="#" onmouseover="mouseDownHandler();"onmouseout="mouseUpHandler();">请将鼠标移到此链接</a>
<br><br>
<input type="text" name="Textbox" size=60>
</form>

</center>



</body>
</html>

<html>

<head>

<title>超级链接页面预览</title>

</head>

<body>
<center>
<form name="form1">
<h1>将光标移至超链接上查看页面预览</h1>
<a href="example1.html" name=link1 onmouseover="link1over()">这是链接一</a><br><br>
<a href="#" name=link2 onmouseover="link2over()">这是链接二</a><br><br>
<a href="#" name=link3 onmouseover="link3over()">这是链接三</a><br><br>
<a href="#" name=link4 onmouseover="link4over()">这是链接四</a><br><br>
<a href="#" name=link5 onmouseover="link5over()">这是链接五</a><br><br>
<img name="img1" src="391.jpg" >
</form>
</center>
<script type="text/javascript">
<!--
function link1over(){
document.form1.img1.src="391.jpg"
}
function link2over(){
document.form1.img1.src="392.jpg"
}
function link3over(){
document.form1.img1.src="398.jpg"
}
function link4over(){
document.form1.img1.src="399.jpg"
}
function link5over(){
document.form1.img1.src="400.jpg"
}
//-->
</script>
</body>

</html>

<html>

<head>

<title></title>

</head>

<body>
<center>
<form name=form1>
<h1>移动鼠标进行切换</h1>
<a href="" name=link1 onmouseover="imgover()" onmouseout="imgout()">
<img name="img1" src="400.jpg" >
</a>
</form>
</center>
<script language="javascript">
<!--
function imgover(){
document.form1.img1.src="399.jpg";
}
function imgout(){
document.form1.img1.src="400.jpg";
}
//-->
</script>
</body>

</html>

<html>

<head>

<title></title>

</head>

<body onkeypress="keyPress()">
<center>
<form name=form1>
<h1>接收键盘输入实例</h1>
<h7>请随意在下面的文本框中输入一些字符</h7>
<br><br>
<input name="textbox" bype="text" size=40>
</form>
</center>
<script type="text/javascript">
<!--
document.onKeyPress=keyPress;
var inString=" ";
function keyPress(e){
if(navigator.appName=="NetScape"){
var keyCode=new Number(e.which);
inString+=unescape("%"+keyCode.toString(16));
document.form1.textbox.value=inString;
}
if(navigator.appName=="Microsoft Internet Explorer"){
inString+=String.fromCharCode(window.event.keyCode);
document.form1.textbox.value=inString;
}
}
//-->
</script>
</body>

</html>

<html>

<head>

<title></title>

</head>

<body>
<center>
<form name="form1">
<h1>移动鼠标至超级链接以查看效果</h1>
<a href="#" name="link1" onmouseover="link1over()" onmouseout="link1out()">这是链接一</a>
</form>
</center>
<script type="text/javascript">
function link1over(){
link1.style.color="red";
link1.style.fontSize=36;
}
function link1out(){
link1.style.color="black";
link1.style.fontSize=16;
}
</script>
</body>

</html>

<html>

<head>

<title>ͼƬٺ̦˳Ҫ</title>
<script language="javascript">
<!--
if(navigator.appName=="Netscape"){}
else
{
var newtop=0;
var newleft=0;
function doMouseMove(){
var curElement=document.all[iit];
newleft=document.body.clientWidth-curElement.style.pixelWidth;
newtop=document.body.clientHeight-curElement.style.pixelHeight;
height=curElement.style.height;
width=curElement.style.width;
width=parseInt(width);
height=parseInt(height);
if(event.clientX>(document.body.clientWidth-width-5))
newleft=document.body.clientWidth+document.body.scrollLeft-5-width;
else
newleft=document.body.scrollLeft+event.clientX;
curElement.style.pixelLeft=newleft;
if(event.clientY>(document.body.clientHeight-5-height))
newtop=document.body.clientHeight+document.body.scrollTop-5-height;
else
newtop=document.body.scrollTop+event.clientY;
curElement.style.pixelTop=newtop;
}
}
document.onmousemove=doMouseMove;
//-->
</script>
</head>

<body>
<center>
<h1>ͼƬٺ̦˳Ҫʾ}</h1>
<br>
<br>
</center>
<script language="javascript">
if(navigator.appName=="Netscape"){
}
else{
document.write("<div id=OuterDiv>");
document.write("<img id=iit src='400.gif' style='position:absolute;top:5pt;left:5pt;z-index:10;visibility:hidden;'>");
document.write("</div>");
}

</script>
</body>

</html>

<html>
<head></head>

<body>
<h1>鼠标感应。</h1>
<img src="398.jpg" style="filter:alpha(opacity=20)" onmouseover="makevisible(this,0);" onmouseout="makevisible(this,1)">
<script language="javascript">
function makevisible(cur,which){
if(which==0)
cur.filters.alpha.opacity=100;
else
cur.filters.alpha.opacity=20;
}
</script>
</body>
</html>

<html>
	<head></head>
	<body onmousedown="click()">
		<h1>禁用鼠标右键菜单</h1>
<script language="javascript">
	function click(){
		if(event.button==2){
			alert("你想看什么");
		}
		}
		document.onmousedown=click;
	</script>
	</body>
</html>