默认行为 什么是默认行为 当空网页的时候点击右键会出现菜单，这就是默认行为
阻止默认行为 普通写法：return false
document.oncontextmenu = function (){ return false; }例子：屏蔽右键菜单 弹出自定义右键菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; list-style: none; } #div1 { position: absolute; width: 80px; background: #ccc; border: 1px solid black; display: none; } </style> <script type="text/javascript"> document.oncontextmenu = function (ev){ var oEvent = ev||event; var oDiv = document.getElementById('div1'); oDiv.style.display = 'block'; oDiv.style.left = oEvent.clientX + 'px'; oDiv.style.top = oEvent.clientY + 'px'; return false; } document.onclick = function(){ var oDiv = document.getElementById('div1'); oDiv.style.display = 'none' } </script> </head> <body> <div id="div1"> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> <li>ddd</li> </ul> </div> </body> </html>例子：只能输入数字的输入框 keydown、keyup事件的区别
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"></style> <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 type="text" id="txt1" /> </body> </html>简易拖拽 拖拽原理 距离不变 三个事件 靠谱拖拽 原有拖拽的问题 直接给document加事件 FF下，空div拖拽Bug 阻止默认事件 防止脱出页面 修正位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #div1 { width: 200px; height: 200px; background: red; position: absolute; } </style> <script type="text/javascript"> window.onload = function (){ var oDiv = document.getElementById('div1'); var disX = 0; var disY = 0; oDiv.onmousedown = function(ev){ var oEvent = ev||event; disX = oEvent.clientX - oDiv.offsetLeft; disY = oEvent.clientY - oDiv.offsetTop; document.onmousemove = function(ev){ var oEvent = ev||event; var l = oEvent.clientX - disX; var t = oEvent.clientY - disY; if (l < 0) { l = 0; } else if (l > document.documentElement.clientWidth - oDiv.offsetWidth) { l = document.documentElement.clientWidth - oDiv.offsetWidth }; if (t < 0) { t = 0; } else if (t > document.documentElement.clientHeight - oDiv.offsetHeight) { t = document.documentElement.clientHeight - oDiv.offsetHeight; }; oDiv.style.left = l + 'px'; oDiv.style.top = t + 'px'; } document.onmouseup = function(){ document.onmousemove = null; document.onmouseup = null; } } return false; } </script> </head> <body> <div id="div1"></div> </body> </html>