您的位置：首页 > Web前端 > JavaScript

2016年5月27日下午（妙味课堂js基础-3笔记三（事件））

2016-05-27 19:39 591 查看

一、默认行为

　　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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航