默认事件 · JavaScript学习记录

### 默认事件 - 默认事件 - 什么是默认事件 - 阻止默认事件 - 普通写法：`return false;` - 例子1：屏蔽右键菜单 - ` document.oncontextmenu = function (ev) { return false; }` - 弹出自定义右键菜单 - 例子2：只能输入数字的输入框 - ` oTxt.onkeydown = function (ev) { return false; }` - `keydown`、`keyup` 事件区别 - 代码： ```HTML <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>默认事件</title> <link rel="stylesheet" href="../reset.css"> <style> #div1 { width: 100px; height: 150px; position: absolute; background-color: rgb(207, 207, 207); display: none; } </style> <script> // 阻止默认事件阻止右键菜单 document.oncontextmenu = function (ev) { var ev = ev||event; var oDiv = get('div1'); oDiv.style.display = 'block'; oDiv.style.top = ev.clientY + 'px'; oDiv.style.left = ev.clientX + 'px'; return false; } // 点击其它位置div消失 document.onclick = function (ev) { var oDiv = get('div1'); oDiv.style.display = 'none'; } // 封装 getElementById 函数 function get(id) { return document.getElementById(id); } window.onload = function () { // 只能输入数字的文本框 // ASCII 0:48 ~ 9:58 var txt = get('txt'); txt.onkeydown = function (ev) { var ev = ev||event; if (ev.keyCode <= 58 && ev.keyCode >=48 || ev.keyCode === 8) { } else { return false; } } } </script> </head> <body> <input type="text" name="" id="txt"> <div id="div1"> <li>123</li> <li>456</li> <li>789</li> <li>123</li> <li>456</li> <li>789</li> <li>123</li> <li>456</li> <li>789</li> </div> </body> </html> ```