事件綁定和阻止預設事件

標籤：style   使用   io   art   問題   ar   cti   div   

一般 為了阻止預設事件，我們都用return false，可是 假設你用了事件綁定，return false在高版本號碼瀏覽當中就會失效，可是低版本號碼瀏覽器中還是能夠的，我們能夠使用事件對象裡面preventDefault()方法來去解決高版本號碼瀏覽器中事件綁定了無法用return false阻止預設事件的問題。

比如：取消滑鼠右擊後出現的預設菜單

document.oncontextmenu=function()

{

  return false;

}

這樣在各個瀏覽器中，滑鼠右擊後，不會出現預設菜單了，可是假設用了事件綁定會如何呢：

 事件綁定函數：

//obj：給哪個元素加事件

//sEv：事件名稱

//fn：運行函數

function addEvent(obj,sEv,fn)

{

  if(obj.addEventListener) //表示高版本號碼瀏覽器

{

    obj.addEventListener(sEv,fn,false);

}

else

{

 obj.attachEvent(‘on‘+sEv,fn)   //低版本號碼瀏覽

}

}

如今我們給document綁定右擊事件

addEvent(document,‘contextmenu‘,function(){

return false;

})

這時，你會發現，在高版本號碼瀏覽器裡面，點擊滑鼠右擊，菜單仍然能夠出現，而在低版本號碼裡面，點擊滑鼠右鍵，菜單不會出現。

解決方案：

addEvent(document,‘contextmenu‘,function(ev){

 var oEvent=ev||event;

       oEvent.preventDefault && oEvent.preventDefault(); //高版本號碼瀏覽器支援，低版本號碼瀏覽器不支援此方法

       return false;

})

這樣就能夠完美解決綁定事件後，阻止瀏覽器的預設方法了，相容各個瀏覽器