默认行为---没有写任何东西，浏览器自动执行的行为（事件），例如按钮的submit
阻止默认行为---oncontextmenu
1 <script> 2 window.oncontextmenu=function(){ 3 return false; 4 }; 5 </script>
阻止默认行为---onkeydown
1 <script> 2 window.onload=function(){ 3 var oTxt=document.getElementById('txt1'); 4 oTxt.onkeydown=function(){ 5 return false; 6 }; 7 }; 8 </script>
阻止默认行为---onsubmit
1 <script> 2 window.onload=function(){ 3 var oBtn=document.getElementById('btn1'); 4 oBtn.onsubmit=function(){ 5 return false; 6 }; 7 }; 8 </script>
自定义鼠标右键菜单
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <style> 7 #ul1{100px;background:#ccc;position:absolute;border:2px dotted #000;display:none;}; 8 </style> 9 <script> 10 document.oncontextmenu=function(ev){ 11 12 var oUl=document.getElementById('ul1'); 13 var oEvent=ev||event; 14 oUl.style.display="block"; 15 oUl.style.left=oEvent.clientX+'px'; 16 oUl.style.top=oEvent.clientY+'px'; 17 return false; 18 }; 19 document.onclick=function(){ 20 var oUl=document.getElementById('ul1'); 21 oUl.style.display="none"; 22 }; 23 </script> 24 </head> 25 26 <body> 27 <ul id="ul1"> 28 <li>wuhan</li> 29 <li>beijing</li> 30 <li>shanghai</li> 31 <li>chengdu</li> 32 <li>hangzhou</li> 33 <li>shenzhen</li> 34 <li>guangzhou</li> 35 <li>tianjin</li> 36 </ul> 37 </body> 38 </html>
预览图
只能输入数字的文本框
1 <script> 2 window.onload=function () 3 { 4 var oTxt=document.getElementById('txt1'); 5 6 oTxt.onkeydown=function (ev) 7 { 8 var oEvent=ev||event; 9 10 //alert(oEvent.keyCode); 11 12 //0 48 13 //9 57 14 //退格 8 15 16 if(oEvent.keyCode!=8 && (oEvent.keyCode<48 || oEvent.keyCode>57)) 17 { 18 return false; 19 } 20 21 //return false; 22 }; 23 }; 24 </script>
拖拽---onmousedown---onmousemove---onmouseup
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <style> 5 #div1 {width:100px; height:100px; background:red; position:absolute;} 6 </style> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 8 <title>无标题文档</title> 9 <script> 10 window.onload=function () 11 { 12 var oDiv=document.getElementById('div1'); 13 14 var disX=0; 15 var disY=0; 16 17 oDiv.onmousedown=function (ev) 18 { 19 var oEvent=ev||event; 20 21 disX=oEvent.clientX-oDiv.offsetLeft;鼠标距离div的距离=可视区的距离-div左边到浏览器左侧的距离（offsetLeft） 22 disY=oEvent.clientY-oDiv.offsetTop; 23 24 document.onmousemove=function (ev) 25 { 26 var oEvent=ev||event; 27 var l=oEvent.clientX-disX; 28 var t=oEvent.clientY-disY; 29 30 if(l<0) 31 { 32 l=0; 33 } 34 else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)//限制移动的范围，防止拖出浏览器以外的范围 35 { 36 l=document.documentElement.clientWidth-oDiv.offsetWidth; 37 } 38 39 if(t<0) 40 { 41 t=0; 42 } 43 else if(t>document.documentElement.clientHeight-oDiv.offsetHeight) 44 { 45 t=document.documentElement.clientHeight-oDiv.offsetHeight; 46 } 47 48 oDiv.style.left=l+'px'; 49 oDiv.style.top=t+'px'; 50 }; 51 52 document.onmouseup=function () 53 { 54 document.onmousemove=null;停止onmousemove，否则会不停地移动 55 document.onmouseup=null;停止onmouseup事件 56 }; 57 58 return false;//修复火狐3.2下面的BUG 59 }; 60 }; 61 </script> 62 </head> 63 64 <body> 65 <div id="div1"></div> 66 </body> 67 </html>
鼠标到div的距离。也就是disX=oEvent.clientX-oDiv.offsetLeft。（水平距离）