标签：
默认行为
document.oncontextmenu=function () { return false; };
同理，阻止表单提交onsubmit、阻止onkeydown
–弹出自定义右键菜单
<!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> <style> * {margin:0; padding:0;} #ul1 {width:100px; background:#CCC; border:1px solid black; position:absolute; display:none;} </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script> document.oncontextmenu=function (ev) { var oEvent=ev||event; var oUl=document.getElementById(‘ul1‘); oUl.style.display=‘block‘; oUl.style.left=oEvent.clientX+‘px‘; oUl.style.top=oEvent.clientY+‘px‘; return false; }; document.onclick=function () { var oUl=document.getElementById(‘ul1‘); oUl.style.display=‘none‘; }; </script> </head> <body> <ul id="ul1"> <li>登陆</li> <li>回到首页</li> <li>注销</li> <li>加入VIP</li> </ul> </body> </html>
•例子2. 只能输入数字的输入框
<!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=utf-8" /> <title>无标题文档</title> <script> window.onload=function () { var oTxt=document.getElementById(‘txt1‘); oTxt.onkeydown=function (ev) { var oEvent=ev||event; //alert(oEvent.keyCode); //0 48 //9 57 //退格 8 if(oEvent.keyCode!=8 && (oEvent.keyCode<48 || oEvent.keyCode>57)) { return false; } //return false; }; }; </script> </head> <body> <input id="txt1" type="text" /> </body> </html>
–keydown、keyup事件的区别
<!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>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
var oDiv=document.getElementById(‘div1‘);
var disX=0;
var disY=0;
oDiv.onmousedown=function (ev)
{
var oEvent=ev||event;
disX=oEvent.clientX-oDiv.offsetLeft;
disY=oEvent.clientY-oDiv.offsetTop;
document.onmousemove=function (ev)
{
var oEvent=ev||event;
var l=oEvent.clientX-disX;
var t=oEvent.clientY-disY;
if(l<0)
{
l=0;
}
else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)
{
l=document.documentElement.clientWidth-oDiv.offsetWidth;
}
if(t<0)
{
t=0;
}
else if(t>document.documentElement.clientHeight-oDiv.offsetHeight)
{
t=document.documentElement.clientHeight-oDiv.offsetHeight;
}
oDiv.style.left=l+‘px‘;
oDiv.style.top=t+‘px‘;
};
document.onmouseup=function ()
{
document.onmousemove=null;
document.onmouseup=null;
};
return false;//FF下，空Div拖拽Bug
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
注意问题
修正位置
总结：
1. 什么是事件的默认行为
2. 上下文菜单：oncontextmenu
3. 文本框内禁止输入内容实例
4. 自定义右键菜单实例
5. 只能输入数字的输入框实例：onkeydown、onkeyup
6. 拖拽实例：拖拽原理、三个事件、document范围、解决FF的bug
7. 限制拖拽范围的条件：document.documentElement.clientWidth
标签：
原文地址：http://www.cnblogs.com/eveblog/p/4503449.html
