《JavaScript学习笔记》：阻止默认行为
在一个空白html文件，当用浏览器打开后，我们单击鼠标右键，可能看到下面的结果，截图如下：
明显这不是我们html文件中产生的，而是浏览器给我们的默认行为，那么如何才能阻止掉这个默认行为呢？
方法为：返回false即可阻止；
看如下的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script>
document.oncontextmenu=function()
{
return false;
};
</script>
</head>
<body>
</body>
</html>当运行如上的文件时，单击鼠标右键就不会有任何的反应了，这样就将默认行为给阻止了。
下面来看个例子：右键菜单的实现。
我们要设计自己的右键菜单，因此，我们首先就要阻止掉浏览器默认的右键菜单的行为。
右键菜单的实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
#div1 {width:200px;height:200px;background:#ccc;position:absolute;display:none}
</style>
<script>
function getPos(ev)
{
var scrollLeft=(document.documentElement.scrollLeft||document.body.scrollLeft);
var scrollTop=(document.documentElement.scrollTop||document.body.scrollTop);
return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop};
}
window.onload=function()
{
var oDiv = document.getElementById('div1');
document.oncontextmenu=function(ev)
{
var oEvent = ev|| event;
var XY=getPos(oEvent);
oDiv.style.display='block';
oDiv.style.left=XY.x+'px';
oDiv.style.top=XY.y+'px';
return false;//阻止默认行为
};
document.onclick=function()
{
oDiv.style.display='none';
};
};
</script>
</head>
<body>
<div id="div1">
<ul id="ul1">
<li>新建</li>
<li>打开</li>
<li>复制</li>
<li>粘贴</li>
<li>...</li>
</ul>
</div>
</body>
</html>在上面实现中，要阻止右键菜单的默认行为，否则就会出现如下的结果，即我们设计的右键菜单和系统默认的右键菜单的叠加。
2341
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
