2016年5月27日下午（妙味课堂js基础-3笔记三（事件））
Posted zzjeny
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了2016年5月27日下午（妙味课堂js基础-3笔记三（事件））相关的知识，希望对你有一定的参考价值。
一、默认行为
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
以上是关于2016年5月27日下午（妙味课堂js基础-3笔记三（事件））的主要内容，如果未能解决你的问题，请参考以下文章