阻止默认事件

阻止默认事件

1.通过on这种方式的绑定的,使用return false;

2.addEventListener绑定的,使用e.preventDefault();

一般 为了阻止默认事件,我们都用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;

})

这样就可以完美解决绑定事件后,阻止浏览器的默认方法了,兼容各个浏览器

 
原文地址:https://www.cnblogs.com/linsx/p/6815780.html