javascript中鼠标事件的总结

javascript 的鼠标事件常用的8个：

 mousedown：鼠标的键被按下。

mouseup：鼠标的键被释放谈起。

mouseover：鼠标移到目标的上方。

mouseout：鼠标移出目标的上方。

mousemove：鼠标在目标上方移动。

click:单击鼠标的键钮。dblclick： contextmenu：弹出右键菜单。

在DOM2.0中W3C对鼠标事件做了规范，鼠标事件被解析为MouseEvent。可以用（e.constructor==MouseEvent）来判读是否为鼠标事件。是左点击还是右点击有一个button属性可以判断，1：按下左键，2：按下中建，3：按下右键。

 但微软是很复杂的。

		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

            function bindMouseEvent(el) {
                var args = [].slice.call(arguments),  //相当于Array.slice.call(arguments)目的是将
                    //arguments对象的数组提出来转化为数组。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;
                    var button = e.button;
                    if (!e.which && isFinite(button)) {
                        e.which = [0, 1, 3, 0, 2, 0, 0, 0][button];//0现在代表没有意义
                    }
                    args[e.which](e);
                }
            }
            var el = document.getElementById("mouseShow");
            var resu = document.getElementById("result");
            var left = function () {
                resu.innerHTML = "左键被按下";
            }
            var middle = function () {
                resu.innerHTML = "中键被按下";
            }
            var right = function () {
                resu.innerHTML = "右键被按下";
            }
            bindMouseEvent(el, left, middle, right);
        }

 

当鼠标在网页上点击时，可以获得很多有用的参数，比如：以当前浏览器的可视区域为参照物（clientX，clientY），以显示屏整个屏幕为参照物（screenX，screenY），此外微软有一套相对用触发事件的对象offsetParent（X，Y），火狐的相对用当前网页的是（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};
  }