JS——事件詳情(默認行為、阻止默認行為的用法:return false等)


默認行為

1》默認行為

  解釋——也稱作:默認事件。即不需要自己編寫代碼,瀏覽器自身所具備的一些功能

例如下圖片所示:

在瀏覽器中單擊右鍵,出現瀏覽器默認的菜單欄選項(這是最簡單的默認行為)

 

2》阻止默認行為

案例1:屏蔽右鍵菜單(即消除上圖所示的“瀏覽器右鍵出現菜單欄”事件)

代碼如下所示:

注:oncontextmenu 事件:在元素中用戶右擊鼠標時觸發並打開上下文菜單。並用return false(普通寫法)來阻止默認行為【關於阻止默認行為,這篇文章可以好好閱讀:http://caibaojian.com/javascript-stoppropagation-preventdefault.html#comments (經測試文章中的方法也可以實現阻止默認行為

 

1 <script>
2         document.oncontextmenu=function(){      //瀏覽器自帶右鍵菜單欄事件
3             return false;                       //阻止“瀏覽器自帶右鍵菜單欄”事件發生
4         }
5 </script>

 

案例2:彈出自定義右鍵菜單欄(即模仿“瀏覽器右鍵出現菜單欄”事件)

演示效果如下:

 

代碼如下所示:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 <title>Document</title>
 8 <style>
 9   ul{
10   position: absolute;
11   float: left;
12   list-style: none;
13   background: #ccc;
14   width: 100px;
15   padding: 0;
16   margin: 0;
17   text-align: center;
18   top: 0;
19   left: 0;
20   display: none;
21   }
22 </style>
23 </head>
24 <body>
25   <script>
26       window.onload=function(){
27           var oUl=document.getElementById('ul');
28           var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
29           var scrollLeft=document.documentElement.scrollLeft || document.body.scrollLeft;
30             
31           document.oncontextmenu=function(e){
32               oUl.style.display='block';                      //把隱藏的ul元素顯示出來
33 
34               oUl.style.left=e.clientX+scrollLeft+'px';       //跟隨鼠標位置移動而顯示
35               oUl.style.top=e.clientY+scrollTop+'px';
36 
37               return false;                                   //阻止瀏覽器自帶右鍵菜單事件
38           }
39             
40           document.onclick=function(){                        //實現任意點擊隱藏ul元素
41               oUl.style.display='none';
42           }
43       }
44   </script>
45 </body>
46 <ul id="ul">
47     <li>登錄</li>
48     <li>注冊</li>
49     <li>我的</li>
50     <li>vip</li>
51 </ul>
52 </html>

代碼思路說明:

第32行代碼:把隱藏的ul元素顯示出來;

第37行代碼:阻止瀏覽器自帶右鍵菜單事件;(用到return false方法)

第40行代碼:實現任意點擊隱藏ul元素;

第28-29行代碼:聲明‘’滾動條“變量(scrollTop、scrollLeft);

第34-35行代碼:用到‘事件(event)方法’,讓ul跟隨鼠標位置移動而顯示;(前面文章有講解過:https://www.cnblogs.com/ytraister/p/10959867.html

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM