关于浏览器响应鼠标各个按键的问题

最新推荐文章于 2022-10-09 09:57:00 发布

shenzhenNBA

最新推荐文章于 2022-10-09 09:57:00 发布

阅读量2.2k

点赞数

分类专栏： JavaScript Browser/浏览器文章标签：浏览器 button chrome javascript ie xhtml

本文链接：https://blog.csdn.net/shenzhenNBA/article/details/7349691

版权

JavaScript 同时被 2 个专栏收录

60 篇文章 0 订阅

订阅专栏

Browser/浏览器

10 篇文章 0 订阅

订阅专栏

开发中时常遇到有关响应鼠标按键的问题，如判断鼠标的左键，右键，和中间的滚轮键按下，或滚动等问题，这里对鼠标按键[/滚动] 问题进行简单介绍，因进段比较忙，没有时间进行更好的写下来，下面是各个代码片段和功能的介绍：

1，响应鼠标滚轮事件的函数

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MouseWheel</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript">
function handleMouseWheel(evt){ //响应鼠标滚轮事件的函数  
  var e=evt || window.event; //事件兼容处理
  if (e.wheelDelta <= 0 || e.detail > 0) {
	document.getElementById('t').innerHTML='滚轮向下滚?'
  }else{
  	document.getElementById('t').innerHTML='滚轮向上滚?'
  }
}
//以上是鼠标滚动事件的响应函数定义，下面是对文档的滚动事件进行事件绑定
if(document.attachEvent || /(?:ie|webkit)/i.test(navigator.appVersion)){
      document.onmousewheel = handleMouseWheel;
}else{
      window.addEventListener("DOMMouseScroll", handleMouseWheel, false);
}
</script>
</head>
<body>
<div id="t">在这里动动你的滚轮看看！！</div>
</body>
</html>

如果想禁用鼠标中间键则在 handleMouseWheel 函数中,直接返回 false 即可,即 return false; 什么都不做即可实现禁用鼠标中间键;

2，响应鼠标各个按键的函数

鼠标按键的值是通过 事件.button 获得（事件这里需要做兼容处理），事件.button 的值有多个[ 1 -- 7]（网上找的），得注意的是，MS IE下对鼠标的各个按键的值定义和其它如 FF，Chrome等浏览器的鼠标各个按键的值的定义不完全相同：

MS IE中 事件.button 的值： 1 = 左键, 2 = 右键, 4 = 中间滚轮键,

FF,Chrome等浏览器下 事件.button 的值： 0 = 左键, 1 = 中间滚轮键, 2 = 右键，...

function mouseXClick(evt){  
	var e=evt || window;  //事件做兼容处理
	if(navigator.userAgent.toLowerCase().indexOf("msie")>=0){  //ms ie
		switch(e.button){
		//FF,Chrome下 0=左键,1=中间滚轮键, 2=右键;　//MS IE中 1=左键,4=中间滚轮键, 2=右键,
		case   0   :   alert('0,mouse Left button\n\ne.button = '+e.button); break;   
		case   1   :   alert('1,mouse Middle button\n\ne.button = '+e.button); break;   
		case   2   :   alert('2,mouse Right button\n\ne.button = '+e.button); break;
		
		case   3   :   alert('3,mouse Left and Right button\n\ne.button = '+e.button); break;
		case   4   :   alert('4,mouse Middle button\n\ne.button = '+e.button); break;
		case   5   :   alert('5,mouse Left and Middle button\n\ne.button = '+e.button); break;
		case   6   :   alert('6,mouse Right and Middle button\n\ne.button = '+e.button); break;
		case   7   :   alert('7,mouse Left and Middle and Right button\n\ne.button = '+e.button); break;
		}
	}else{	//ff,chrome,etc
		switch(e.button){ 
		case   1   :   alert('mouse Left button\n\ne.button = '+e.button); break;   		
		case   2   :   alert('mouse Right button\n\ne.button = '+e.button); break;
		case   3   :   alert('unknow ? \n\ne.button = '+e.button); break;
		case   4   :   alert('mouse Middle button\n\ne.button = '+e.button); break;		
		}	
	}
}

以上是各个浏览器下响应鼠标各个按键的函数的定义，可以对各个按键进行不同的操作，这里仅仅是弹出提示进行测试而已；接下来是函数绑定到对象，以便相应相关的动作，这里对不同的对象进行绑定有的区别:

(1) 对 body 对象绑定该函数, 如 : <body οnmοusedοwn="javascript:mouseXClick(event);"> 这个在 MS IE, FF,Chrome浏览器下都生效, 但是有个小问题, 就是仅仅在内容占满的 body 部分起作用, 当内容很少(如: 就一行80个字符), 也就是body中内容没有占一个显示器屏幕, 也即没有出现滚动条时, 在内容的下面单击鼠标时,还是可以出现鼠标的左,中,右等键;

(2) 对document 对象进行绑定时, 如 : document.οnmοusedοwn= function(event){ mouseXClick(event); }; 这个在FF,Chrome浏览器下有效, 这个就不会出现上面(1)中当内容少时出现的情况, 但在 MS IE 下这种方式绑定不起作用;

所以对那个对象进行绑定根据具体的情况而定;

更多的信息可以网上搜索.

shenzhenNBA

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关于浏览器响应鼠标各个按键的问题

开发中时常遇到有关响应鼠标按键的问题，如判断鼠标的左键，右键，和中间的滚轮键按下，或滚动等问题，这里对鼠标按键[/滚动] 问题进行简单介绍，因进段比较忙，没有时间进行更好的写下来，下面是各个代码片段和功能的介绍：1，响应鼠标滚轮事件的函数<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3
复制链接

扫一扫

专栏目录