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>

预览图

只能输入数字的文本框

 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。（水平距离）

 


__EOF__

本文作者：Paxster
本文链接：https://www.cnblogs.com/paxster/archive/2013/05/14/3077278.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
posted @   Paxster  阅读(219)  评论(2)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 地球OL攻略 —— 某应届生求职总结
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· .NET周刊【3月第1期 2025-03-02】
· [AI/GPT/综述] AI Agent的设计模式综述
点击右上角即可分享
微信分享提示
AI IDE Trae