Javascript 事件对象(六)事件默认行为

事件默认行为:

阻止默认事件
普通写法:return false;
屏蔽右键菜单 :  oncontextmenu

 1 <!DOCTYPE HTML>

 2 <html>

 3 <head>

 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 5 <title>无标题文档</title>

 6 <script>

 7 /*

 8 事件默认行为:当一个事件发生的时候浏览器自己会默认做的事情

 9 怎么阻止?

10 当前这个行为是什么事件触发的,然后在这个事件的处理函数中使用return false;

11 */

12 

13 document.onkeydown = function() {

14     

15     return false;

16     

17 }

18 

19 //oncontextmenu : 右键菜单事件,当右键菜单(环境菜单)显示出来的时候触发

20 

21 document.oncontextmenu = function() {

22     

23     //alert(1)

24     

25     return false;

26     

27 }

28 </script>

29 </head>

30 

31 <body style="height: 2000px;">

32 </body>

33 </html>

 

事件默认行为实例:(自定义右键菜单)

 1 <!DOCTYPE HTML>

 2 <html>

 3 <head>

 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 5 <title>无标题文档</title>

 6 <style>

 7 #div1 {width:100px; height: 200px; border: 1px solid red; position: absolute; display: none;}

 8 </style>

 9 <script>

10 window.onload = function() {

11     

12     var oDiv = document.getElementById('div1');

13     

14     document.oncontextmenu = function(ev) {

15         var ev = ev || event;

16         

17         oDiv.style.display = 'block';

18         

19         oDiv.style.left = ev.clientX + 'px';

20         oDiv.style.top = ev.clientY + 'px';

21         

22         return false;

23         

24     }

25     

26     document.onclick = function() {

27         oDiv.style.display = 'none';

28     }

29     

30 }

31 </script>

32 </head>

33 

34 <body>

35     <div id="div1"></div>

36 </body>

37 </html>

 

 

 

你可能感兴趣的:(JavaScript)