javascript的鼠标事件是个比较庞大的家族。常见的有以下8个：

mousedown鼠标的键钮被按下。mouseup鼠标的键钮被释放弹起。click单击鼠标的键钮。dblclick鼠标的键钮被按下。contextmenu 弹出右键菜单。mouseover鼠标移到目标的上方。mouseout鼠标移出目标的上方。mousemove鼠标在目标的上方移动。mousedown事件与mouseup事件可以说click事件在时间上的细分顺序是mousedown mouseup click。因此一个点击事件通常会激发几个鼠标事件。请在这里点击测试一个点击到底捆绑了多少种鼠标事件清空有了它们我们可以做许多事但对于高层次的应用如游戏是显然不够的于是鼠标事件的点击事件又根据究竟是点左键还是右键进行细分。在DOM2.0中W3C对鼠标事件作了现范鼠标事件被解析为MouseEvent我们可以用e.constructor MouseEvent来判断其是否为鼠标事件是左键点击还是右键点击由它的一个叫button的属性判定。以下就是W3C的标准现范1按下左键2按下中键3按下右键当然微软是不会妥协的因为e.button本来就是微软最先实现的网景用的是e.which但相对而言微软的复杂多了。0没有键被按下1按下左键2按下右键3左键与右键同时被按下4按下中键5左键与中键同时被按下6中键与右键同时被按下7三个键同时被按下更详细的情况见下表。GE:Gecko ;SA:Safari; OP:Opera; NS:NetscapeIENS 4GE ≥ 1.0SA 3OP ≥ 8.0GE0.9OP8.0e.button左键1undefined011中键4undefined123右键2undefined232e.which左键undefined1111中键undefined2223右键undefined3332为此我们可以使用以下函数来绑定左中右键。functionbindMouseEvent(el){varargs [].slice.call(arguments),el el || document;args[0] function(){},args[1] args[1] || args[0],args[2] args[2] || args[0],args[3] args[3] || args[0],el.onmousedown function(e){e e || window.event;varbutton e.button;if( !e.which isFinite(button) ) {e.which [0,1,3,0,2,0,0,0][button];//0现在代表没有意义}args[e.which](e);}}它接受四个参数第一个为绑定对象第二个左键按下的回调第三个为中键按下的回调第四个为右键按下的回调。用法如下varel document.getElementById(mouse);varex document.getElementById(explanation);varleft function(){ex.innerHTML 左键被按下;}varmiddle function(){ex.innerHTML 中键被按下;}varright function(){ex.innerHTML 右键被按下;}bindMouseEvent(el,left,middle,right);请在这里点击测试左中右鼠标键绑定函数此外通过鼠标在网页上的点击我们还可以获得许多有用的参数如获得当前鼠标的坐标。根据其参照物的不同分为以下几套坐标系。一套是以当前浏览器的可视区为参照物clientX, clientY另一套是以显示器的屏幕为参照物screenX, screenY。此外微软还有一套坐标系x,y它是相对于触发事件的对象的offsetParent的火狐有另一套坐标系pageX, pageY它是相对于当前网页的。我们可以通过如下函数来获得鼠标在网页的坐标。vargetCoordInDocument function(e) {e e || window.event;varx e.pageX || (e.clientX (document.documentElement.scrollLeft|| document.body.scrollLeft));vary e.pageY || (e.clientY (document.documentElement.scrollTop|| document.body.scrollTop));return{x:x,y:y};}请在这里移动鼠标。clientX,clientY的坐标系不受滚动条影响至于mouseover,mousemove,mouseout没有什么好说并且无浏览器差异。我们来看鼠标滚轮事件这个差异很严重。IE、Safari、 Opera 、chrome是mousewheel事件Firefox是DOMMouseScroll事件。事件属性方面IE等是event.detailFirefox是event. wheelDelta。IE等往上滚一圈为120往下滚一圈为-120。Firefox往上滚一圈为-3往下滚一圈为3。我们可以构造一个函数来削除它们的差异。varmouseScroll function(fn){varroll function(){vardelta 0,e arguments[0] || window.event;delta (e.wheelDelta) ? e.wheelDelta / 120 : -(e.detail || 0) / 3;fn(delta);//回调函数中的回调函数}if(window.netscape ){document.addEventListener(DOMMouseScroll, roll,false);}else{document.onmousewheel roll;}}此函数接受一函数作为参数如mouseScroll(function(delta){varobj document.getElementById(scroll),current parseInt(obj.offsetTop)(delta*10);obj.style.top currentpx;});运行代码