蓝鸥原生JS：事件的默认行为及效果演示
事件的默认行为
浏览器自带的行为就是默认行为
阻止默认行为
只要将默认的事件return false，就可以组织默认行为的执行。
示例：自定义右键菜单：默认的右键菜单是系统提供的选项，我们可以阻止默认的右菜单，来自定义新右键菜单样式
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul {
list-style-type: none;
display:none;
position:absolute;
}
* {
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript">
// 鼠标右键触发的时间
document.oncontextmenu = function (ev) {
var oUl = document.getElementById('ul1');
var oEvent = ev || event;
oUl.style.display = 'block';
oUl.style.left = oEvent.clientX + 'px';
oUl.style.top = oEvent.clientY + 'px';
return false;
}
// 鼠标左键触发的事件
document.onclick = function (ev) {
var oUl = document.getElementById('ul1');
oUl.style.display = 'none';
}
</script></head><body>
<!-- 自定义右键菜单 -->
<ul id = 'ul1' >
<li>首页</li>
<li>登录</li>
<li>注册</li>
</ul>
</body></html>
示例：输入框中只能输入数字和退格
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function () {
var oText = document.getElementById('text');
oText.onkeydown = function (ev) {
var oEvent = ev || event;
if ( (oEvent.keyCode < 40 && oEvent.keyCode != 8) || oEvent.keyCode > 57 ) {
return false;
};
}
}
</script></head><body>
<input type = "text" id = "text">
</body></html>
拖拽
拖拽时，鼠标经历三个事件：
鼠标按下时，存储当前鼠标距离拖拽对象左上角的距离
鼠标移动时，根据鼠标移动的距离移动拖拽对象的位置
鼠标抬起时，停止拖拽
示例：鼠标拖拽一个div
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#div1 {
width: 100px;
height: 100px;
background-color : red;
position: absolute;
}
</style>
<script type="text/javascript">
window.onload = function () {
var oDiv = document.getElementById('div1');
// 当鼠标按下时计算鼠标距离div左上角的位置
oDiv. = function (ev) {
var oEvent = ev || event;
var oX = oEvent.clientX - oDiv.offsetLeft;
var oY = oEvent.clientY - oDiv.offsetTop;
// 当鼠标开始移动，重新设置div的位置
document. = function (ev) {
var oEvent = ev || event;
oDiv.style.left = oEvent.clientX - oX + 'px';
oDiv.style.top = oEvent.clientY - oY + 'px';
};
// 当鼠标抬起，结束移动，清除移动事件的函数
document. = function () {
document. = null;
document. = null;
};
};
};
</script></head><body>
<div id = "div1"></div></body></html>
零基础学习HTML5—HTML+CSS基础视频教程
http://edu.51cto.com/course/course_id-6452.html
