一、默认行为
1. 什么是事件的默认行为（默认事件）
（1）浏览器不需要我们去编写，浏览器自身就已经具备的功能；（点击右键弹出页面菜单）
（2）如何阻止默认行为
2. 上下文菜单：oncontextmenu（右键菜单）
<script type="text/javascript">
document.oncontextmenu=function () {
alert("a")
};
</script>
点击右键就会弹出a，且会出现右键菜单；
<script type="text/javascript">
document.oncontextmenu=function () {
return false;
};
</script>
已经阻止了右键菜单，点击无法弹出。
再来看一下一个阻止表单提交的实例：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
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>
无论怎么点击提交按钮都无法提交网址。这里就有关于表单校验了。
3. 文本框内禁止输入内容实例（阻止onkeydown）
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
window.onload=function ()
{
var oTxt=document.getElementById(‘txt1‘);
oTxt.onkeydown=function ()
{
return false;
};
};
</script>
</head>
<body>
<input id="txt1" type="text" />
</body>
这个实例在输入框中间无法输入字母，但是可以输入汉字（why？）
4. 自定义右键菜单实例
<head>
<style type="text/css">
* {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 type="text/javascript">
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>
5. 只能输入数字的输入框实例：onkeydown、onkeyup
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
window.onload=function ()
{
var oTxt=document.getElementById(‘txt1‘);
oTxt.onkeydown=function (ev)
{
var oEvent=ev||event;
if(oEvent.keyCode!=8 && (oEvent.keyCode<48 || oEvent.keyCode>57))
{
return false;
}
};
};
</script>
</head>
<body>
<input id="txt1" type="text" />
</body>
二、拖拽
6. 拖拽实例：拖拽原理、三个事件、document范围、解决FF的bug
7. 限制拖拽范围的条件：document.documentElement.clientWidth
时间： 2024-11-25 02:20:20