一、默认行为
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