首页 > 代码库 > js阻止默认事件、拖拽等等

js阻止默认事件、拖拽等等

2024-09-02 04:57:32   217人阅读

1.自定义右键菜单：

技术分享 
 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 * {margin:0; padding:0; list-style:none;}
 8 #div1 {position:absolute; width:80px; background:#CCC; border:1px solid black; display:none;}
 9 </style>
10 <script>
11 document.oncontextmenu=function (ev)
12 {
13     var oEvent=ev||event;
14     var oDiv=document.getElementById(‘div1‘);
15     
16     oDiv.style.display=‘block‘;
17     oDiv.style.left=oEvent.clientX+‘px‘;
18     oDiv.style.top=oEvent.clientY+‘px‘;
19     
20     return false;
21 };
22 
23 document.onclick=function ()
24 {
25     var oDiv=document.getElementById(‘div1‘);
26     
27     oDiv.style.display=‘none‘;
28 };
29 </script>
30 </head>
31 <body>
32 <div id="div1">
33     <ul>
34         <li>aaa</li>
35         <li>bbb</li>
36         <li>ccc</li>
37         <li>ddd</li>
38     </ul>
39 </div>
40 </body>
41 </html>
View Code

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         //alert(oEvent.keyCode);
10         //0-    48
11         //9-    57
12         //如果 用户按的 不是退格 并且 也不是数字
13         
14         if(oEvent.keyCode!=8 && (oEvent.keyCode<48 || oEvent.keyCode>57))
15         {
16             return false;
17         }
18     };
19 };
20 </script>
21 </head>
22 <body>
23 <input type="text" id="txt1" />
View Code

3、拖拽：

技术分享 
 1 <style>
 2 #div1 {width:200px; height:200px; background:red; position:absolute;}
 3 </style>
 4 <script>
 5 window.onload=function ()
 6 {
 7     var oDiv=document.getElementById(‘div1‘);
 8     
 9     var disX=0;
10     var disY=0;
11     
12     oDiv.onmousedown=function (ev)
13     {
14         var oEvent=ev||event;
15         
16         disX=oEvent.clientX-oDiv.offsetLeft;
17         disY=oEvent.clientY-oDiv.offsetTop;
18         
19         document.onmousemove=function (ev)
20         {
21             var oEvent=ev||event;
22             var l=oEvent.clientX-disX;
23             var t=oEvent.clientY-disY;
24             
25             if(l<0)
26             {
27                 l=0;
28             }
29             else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)
30             {
31                 l=document.documentElement.clientWidth-oDiv.offsetWidth;
32             }
33             
34             if(t<0)
35             {
36                 t=0;
37             }
38             else if(t>document.documentElement.clientHeight-oDiv.offsetHeight)
39             {
40                 t=document.documentElement.clientHeight-oDiv.offsetHeight;
41             }
42             
43             oDiv.style.left=l+‘px‘;
44             oDiv.style.top=t+‘px‘;
45         };
46         
47         document.onmouseup=function ()
48         {
49             document.onmousemove=null;
50             document.onmouseup=null;
51         };
52         
53         return false;
54     };
55 };
56 </script>
57 </head>
58 <body>
59 <div id="div1"></div>
View Code

 

js阻止默认事件、拖拽等等


联系
我们