javascript实现在某个元素上阻挡鼠标右键大事的方法和实例_

1、javascript实现在某个元素上阻挡鼠标右键大事的方法和实例_ 最近在做一个小东西的时候需要在某一个元素上“右击”触发一个自定义菜单，通过自定义的菜单对右击的条目进行编辑。这就要求屏蔽默认的右键菜单 IE和FF下面的元素都有oncontextmenu这个方法，在FF下面只要通过event.preventDefault()方法就可以轻松实现这个效果。IE并不支持这个方法，在IE下面一般是通过触发方法后return false来实现阻挡默认大事的。 通常我们用法阻挡右键大事是在全局阻挡，即在document层面就将右键拦截，现在我想要实现的效果是只在特定的区域阻挡默认的右键大事，而其他区域并不

2、影响。 通过试验我发觉要是在IE下绑定的方法中return false后在document层面上可以实现阻挡右键的默认行为。但是具体到某一个元素比如div，则失效。 最终通过查找手册发觉，IE下的event对象有一个returnValue属性，假如将这个属性设置为false则不会触发默认的右键大事。类似如下： 复制代码 代码如下: event.returnValue = false; 只要加入这句就实现了我想要的效果。完整Demo代码： 01 !DOCTYPE html PUBLIC -/W3C/DTD XHTML 1.0 Transitional/EN l1/DTD/xhtml1-trans

3、itional.dtd 02 html xmlns=l 03 head 04 meta http-equiv=Content-Type content=text/html; charset=utf-8 / 05 title在某个元素上阻挡鼠标右键默认大事DEMO/title 06 style 07 bodyfont-size:12px; line-height:24px; font-family:Arial, Helvetica, sans-serif; 08 #activeAreawidth:300px;height:200px; background:#06C; color:#fff; 0

4、9 #cstCM width:120px; background:#eee; border:1px solid #ccc; position:absolute; 10 #cstCM ulmargin:0; padding:0; 11 #cstCM ul li list-style:none;padding:0 10px; cursor:default; 12 #cstCM ul li:hover background:#009; color:#fff; 13 .splitTop border-bottom:1px solid #ccc; 14 .splitBottomborder-top:1p

5、x solid #fff; 15 /style 16 script 17 function customContextMenu(event) 18 event.preventDefault ? event.preventDefault():(event.returnValue = false); 19 var cstCM = document.getElementById(cstCM); 20 cstCM.style.left = event.clientX + px; 21 cstCM.style.top = event.clientY + px; 22 cstCM.style.displa

6、y = block; 23 document.onmousedown = clearCustomCM; 24 25 function clearCustomCM() 26 document.getElementById(cstCM).style.display = none; 27 document.onmousedown = null; 28 29 /script 30 /head 31 32 body 33 div id=cstCM style=display:none; 34 ul 35 liView/li 36 liSort By/li 37 li class=splitTopRefresh/li 38 li class=splitBottomPaste/li 39 li class=splitTopPaste Shortcut/li 40 li class=splitBottomProperty/li 41 /ul 42 /div 43 div id=activeArea oncontextmenu = customContextMenu(event) 44 Custom Context Menu Area 45 /div 46 /b