事件中级
- 什么是事件的默认行为
游览器自身具备的功能，如：提交表单，游览器点击右键会出现菜单，
阻止默认行为：阻止系统带的行为
<script>
window.onload=function ()
{
var oForm=document.getElementById('form1');
oForm.onsubmit=function ()
{
return false;//阻止表单提交
};
};
</script>
</head>
<body>
<form id="form1" action="http://www.miaov.com/">
<input type="submit" />
</form>
</body>
- 上下文菜单：oncontextmenu
<script>
//游览器点击右键，阻止弹出菜单
document.oncontextmenu=function ()
{
return false;
};
</script>
- 文本框内禁止输入内容实例
<script>
window.onload=function ()
{
var oTxt=document.getElementById('txt1');
oTxt.onkeydown=function () // 阻止键盘输入
{
return false;
};
};
</script>
</head>
<body>
<input id="txt1" type="text" />
</body>
- 自定义右键菜单实例
<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>
- 只能输入数字的输入框实例：onkeydown、onkeyup
<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>
- 拖拽实例：拖拽原理、三个事件、document范围、解决FF的bug
7. 限制拖拽范围的条件：document.documentElement.clientWidth
<!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;
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
