当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript 鼠标事件总结

Javascript
JS option location 页面跳转实现代码
ExtJS 简介 让你知道extjs是什么
ExtJs 学习笔记 Hello World!
ExtJs 学习笔记基础篇 Ext组件的使用
ExtJs 学习笔记 Ext.Panle Ext.TabPanel Ext.Viewport
漂亮的脚本日历,和大家分享
JS Tween 颜色渐变
js 图片轮播(5张图片)
开发跨浏览器javascript常见注意事项
通用JS事件写法实现代码
Js 订制自己的AlertBox(信息提示框)
js 浮动层菜单收藏
JavaScript入门教程(10) 认识其他对象
JQuery 常用方法基础教程
jQuery 页面载入进度条实现代码
jQuery Ajax 全解析
CSS+Table图文混排中实现文本自适应图片宽度（超简单+跨所有浏览器）
Ext JS Grid在IE6 下宽度的问题解决方法
js window.event对象详尽解析
JavaScript 悬浮窗口实现代码

No. « 215 216 217 218 »

技术文章搜索

关键字

Javascript 中的 javascript 鼠标事件总结

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2010-01-10   浏览: 87 ::
收藏到网摘: n/a

javascript的鼠标事件是个比较庞大的家族。需要的朋友可以参考下。

常见的有以下8个：
mousedown：鼠标的键钮被按下。
mouseup：鼠标的键钮被释放弹起。
click：单击鼠标的键钮。
dblclick：鼠标的键钮被按下。
contextmenu ：弹出右键菜单。
mouseover：鼠标移到目标的上方。
mouseout：鼠标移出目标的上方。
mousemove：鼠标在目标的上方移动。
mousedown事件与mouseup事件可以说click事件在时间上的细分，顺序是mousedown => mouseup => click。因此一个点击事件，通常会激发几个鼠标事件。


[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

有了它们，我们可以做许多事，但对于高层次的应用（如游戏）是显然不够的，于是鼠标事件的点击事件又根据究竟是点左键还是右键进行细分。在DOM2.0中，W3C对鼠标事件作了现范，鼠标事件被解析为MouseEvent（我们可以用e.constructor == MouseEvent来判断其是否为鼠标事件，是左键点击还是右键点击由它的一个叫button的属性判定。以下就是W3C的标准现范：
0：按下左键
1：按下中键（如果有的话）
2：按下右键
当然微软是不会妥协的，因为e.button本来就是微软最先实现的，网景用的是e.which，但相对而言，微软的复杂多了。
0：没有键被按下
1：按下左键
2：按下右键
3：左键与右键同时被按下
4：按下中键
5：左键与中键同时被按下
6：中键与右键同时被按下
7：三个键同时被按下
更详细的情况见下表。
GE:Gecko ;SA:Safari; OP:Opera; NS:Netscape

IE NS 4 GE ≥ 1.0
SA 3
OP ≥ 8.0		 GE0.9 OP<8.0
e.button 左键 1 undefined 0 1 1
中键 4 undefined 1 2 3
右键 2 undefined 2 3 2
e.which 左键 undefined 1 1 1 1
中键 undefined 2 2 2 3
右键 undefined 3 3 3 2
为此我们可以使用以下函数来绑定左右键。
复制代码 代码如下:

var mouseEvent = function(){
var arg = arguments[0],
el = arg.el || document,
leftfn = arg.left || function(){},
rightfn = arg.right || function(){},
middlefn = arg.middle || function(){},
buttons = {};
el.onmousedown = function(e){
e = e || window.event;
if(!+"\v1"){
switch(e.button){
case 1:buttons.left = true; break;
case 2:buttons.right = true; break;
case 4:buttons.middle = true; break;
}
}else{
switch(e.which){
case 1:buttons.left = true;break;
case 2:buttons.middle = true; break;
case 3:buttons.right = true;break;
}
}
if(buttons.left){
leftfn();
}else if(buttons.middle){
middlefn();
}else if(buttons.right){
rightfn();
}
buttons = {
"left":false,
"middle":false,
"right":false
};
}
}

它接受一个哈希参数，都是可选项。哈希的el为要绑定鼠标事件的元素，left为点击左键激发的事件，其他两个类推。用法如下：
复制代码 代码如下:

var el = document.getElementById("mouse");
var ex = document.getElementById("explanation");
var left = function(){
ex.innerHTML = "左键被按下";
}
var right = function(){
ex.innerHTML = "右键被按下";
}
mouseEvent({el:el,left:left,middle:null,right:right});


[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

此外，通过鼠标在网页上的点击，我们还可以获得许多有用的参数，如获得当前鼠标的坐标。根据其参照物的不同，分为以下几套坐标系。一套是以当前浏览器的可视区为参照物（clientX, clientY），另一套是以显示器的屏幕为参照物（screenX, screenY）。此外微软还有一套坐标系（x,y），它是相对于触发事件的对象的offsetParent的，火狐有另一套坐标系（pageX, pageY），它是相对于当前网页的。我们可以通过如下函数来获得鼠标在网页的坐标。
复制代码 代码如下:

var getCoordInDocument = function(e) {
e = e || window.event;
var x = e.pageX || (e.clientX +
(document.documentElement.scrollLeft
|| document.body.scrollLeft));
var y= e.pageY || (e.clientY +
(document.documentElement.scrollTop
|| document.body.scrollTop));
return {'x':x,'y':y};
}


[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

clientXY
（clientX,clientY）的坐标系，不受滚动条影响
至于mouseover,mousemove,mouseout没有什么好说，并且无浏览器差异。我们来看鼠标滚轮事件，这个差异很严重。IE、Safari、 Opera 、chrome是mousewheel事件，Firefox是DOMMouseScroll事件。事件属性方面，IE等是event. wheelDelta，Firefox是event. detail。IE等往上滚一圈为120，往下滚一圈为-120。Firefox往上滚一圈为-3，往下滚一圈为3。我们可以构造一个函数来削除它们的差异。
复制代码 代码如下:

var mouseScroll = function(fn){
var roll = function(){
var delta = 0,
e = arguments[0] || window.event;
delta = (e.wheelDelta) ? e.wheelDelta / 120 : -(e.detail || 0) / 3;
fn(delta);//回调函数中的回调函数
}
if(/a/[-1]=='a'){
document.addEventListener('DOMMouseScroll', roll, false);
}else{
document.onmousewheel = roll;
}
}

此函数接受一函数作为参数，如：
复制代码 代码如下:

mouseScroll(function(delta){
var obj = document.getElementById('scroll'),
current = parseInt(obj.offsetTop)+(delta*10);
obj.style.top = current+"px";
});


[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]