默認事件 · 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> ```