大学IT网 - 最懂大学生的IT学习网站! QQ资料交流群:367606806
当前位置:大学IT网 > JavaScript技巧 > js事件默认行为

js事件默认行为

关键词:js事件默认行为  阅读(3399) 赞(14)

[摘要]本文是对js事件默认行为的讲解,对学习JavaScript编程技术有所帮助,与大家分享。

事件默认行为:

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

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>无标题文档</title>
 <script>
 /*
 事件默认行为:当一个事件发生的时候浏览器自己会默认做的事情
 怎么阻止?
 当前这个行为是什么事件触发的,然后在这个事件的处理函数中使用return false;
 */
 
 document.onkeydown = function() {
     
     return false;
     
 }
 
 //oncontextmenu : 右键菜单事件,当右键菜单(环境菜单)显示出来的时候触发
 
 document.oncontextmenu = function() {
     
     //alert(1)
     
     return false;
     
 }
 </script>
 </head>
 
 <body style="height: 2000px;">
 </body>
 </html>

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

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>无标题文档</title>
 <style>
 #div1 {width:100px; height: 200px; border: 1px solid red; position: absolute; display: none;}
 </style>
 <script>
 window.onload = function() {
     
     var oDiv = document.getElementById('div1');
     
     document.oncontextmenu = function(ev) {
         var ev = ev || event;
         
         oDiv.style.display = 'block';
         
         oDiv.style.left = ev.clientX + 'px';
         oDiv.style.top = ev.clientY + 'px';
         
         return false;
         
     }
     
     document.onclick = function() {
         oDiv.style.display = 'none';
     }
     
 }
 </script>
 </head>
 
 <body>
     <div id="div1"></div>
 </body>
 </html>


相关评论