Javascript事件详解2

默认行为---没有写任何东西,浏览器自动执行的行为(事件),例如按钮的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{width: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>

Javascript事件详解2预览图

只能输入数字的文本框

 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>

Javascript事件详解2鼠标到div的距离。也就是disX=oEvent.clientX-oDiv.offsetLeft。(水平距离)

 

你可能感兴趣的:(JavaScript)