开发中时常遇到有关响应鼠标按键的问题,如判断鼠标的左键,右键,和中间的滚轮键按下,或滚动等问题,这里对鼠标按键[/滚动] 问题进行简单介绍,因进段比较忙,没有时间进行更好的写下来,下面是各个代码片段和功能的介绍:
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 下这种方式绑定不起作用;
所以对那个对象进行绑定根据具体的情况而定;
更多的信息可以网上搜索.