javascript之键盘与鼠标事件

最新推荐文章于 2023-12-06 10:39:54 发布

车晋强

最新推荐文章于 2023-12-06 10:39:54 发布

阅读量934

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/chejinqiang/article/details/44116747

版权

第十章键盘和鼠标事件处理
键盘和鼠标事件处理功能非常强大，在网页设计中经常用到。这一章将介绍相关的内容。
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键并松开鼠

最低0.47元/天解锁文章

车晋强

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
javascript之键盘与鼠标事件

第十章键盘和鼠标事件处理键盘和鼠标事件处理功能非常强大，在网页设计中经常用到。这一章将介绍相关的内容。10.1事件处理在本节给出一个例子，当用户在Web页面中单击鼠标左键时，程序要能够报告鼠标所在的位置，当和户释放鼠标键时，需要报告鼠标键已经弹起，如果用户在按下三个功能键的同时再按下鼠标键，也应当给出详细的报告。在实际应用中，鼠标右键对程序控制来说是没有用的，因为浏览器已经预先
复制链接

扫一扫

专栏目录