JS——事件詳情（默認行爲、阻止默認行爲的用法：return false等）

時間 2019-12-12

標籤事件詳情默認行爲阻止用法 return false 欄目 JavaScript 简体版

原文原文鏈接

默認行爲javascript

1》默認行爲html

　　解釋——也稱做：默認事件。即不須要本身編寫代碼，瀏覽器自身所具有的一些功能
java

例以下圖片所示：瀏覽器

在瀏覽器中單擊右鍵，出現瀏覽器默認的菜單欄選項（這是最簡單的默認行爲）測試

2》阻止默認行爲ui

案例1：屏蔽右鍵菜單（即消除上圖所示的「瀏覽器右鍵出現菜單欄」事件）spa

代碼以下所示：code

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

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

案例2：彈出自定義右鍵菜單欄（即模仿「瀏覽器右鍵出現菜單欄」事件）blog

演示效果以下：

代碼以下所示：

 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>