关于思考鼠标事件对象的按钮事件的跨浏览器的思路分析

首先我们看一段代码：

window.onload=function(){

 document.onmouseout=function(evt){

var e=evt||eindow.evt

alert(e.button);

}

};

当我们点击鼠标时，我们发现ie返回是undefind,那么如何解决这个问题？

第一步 我们肯定要设想如何兼容这两大浏览器，所以我们首先得设置这么一个函数：

function getButton(){

if(){

}else{

}

第二步为函数设置一个参数evt,代表是事件对象的参数

function getButton(evt){

if(){

}else{

}

因为鼠标点击事件涉及到事件对象，所以

我们要设置一个变量来表示它，但现实情况是ie和火狐这两者的事件对象不一样，所以要让这个变量具有这两个对象的特征

function getButton(evt){

if(){

var e=evt||eindow.evt;

}else  if{

}

现在我们设想第一种情况是w3c的情形

evt  他没有什么特殊情况，所以返回 return evt;

第二种情况   ie情形

他的情形比较复杂   

当你点左键时（1）则应该是0

当你点右键时（4）则应该是1

当你点中键时(2)应该返回是2

所以描述如下：

     e.button1) 1 return 0

                    2)4  return   0

3)   2   return 2;

我们应该选择switch case语句符合这种描述

 switch(e.button){

case 1:

return 0;

case  4:

return 1;

case 2:

          return 2;

    }

组合上面思路，可得

if(evt){

return  evt;

}else  if(window.event){

switch(e.button){

case 1:

return 0;

case  4:

return 1;

case 2:

          return 2;

    }

}

但当我们点击鼠标中键在360浏览器时则显示不对，所以我们进一步switch ...case这里我就详细解释

if(evt){

return  evt;

}else  if(window.event){

switch(e.button){

case 1:

return 0;

case  4:

return 1;

case 2:

          return 2;

case 0:

      return 2;

    }

}

结论：1在写所有事件兼容性代码时，首先分析这个需求涉及到多少个对象？多少个对象属性，方法？

            2，n个对象用一个变量如何表示

            3，设想当这些对象出现的所有情形，再确定这些情形之间不兼容的情况在哪些地方？

            4，直接通过设置返回与之统一的情况的值即可