Chinaunix首页 | 论坛 | 博客

拾忆1765207585的ChinaUnix博客

首页　| 　博文目录　| 　关于我

拾忆1765207585

  • 博客访问： 957234
  • 博文数量： 210
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 2070
  • 用 户 组： 普通用户
  • 注册时间： 2014-11-19 21:54
文章分类

全部博文（210）

文章存档

2020年（2）

2019年（18）

2018年（27）

2017年（5）

2016年（53）

2015年（88）

2014年（17）

我的朋友
最近访客
推荐博文
JavaScript 阻止浏览器默认事件

分类： JavaScript

2016-08-22 10:46:19


html代码：

点击(此处)折叠或打开

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title></title>
  6.         <link rel="stylesheet" href="css/oncontextmenu.css" />
  7.         <script type="text/javascript" src="js/oncontextmenu.js"></script>
  8.     </head>
  9.     <body>
  10.         <div id="bigbox">
  11.             <div id="box">
  12.                 <ul>
  13.                     <li>返回</li>
  14.                     <li>前进</li>
  15.                     <li>重新加载</li>
  16.                     <li>检查</li>
  17.                     <li>复制</li>
  18.                     <li>粘贴</li>
  19.                     <li>源代码</li>
  20.                 
  21.                 </ul>
  22.             </div>
  23.         </div>
  24.         
  25.     </body>
  26. </html>
css代码：

点击(此处)折叠或打开

  1. *{
  2.     margin:0;
  3.     padding:0;
  4. }
  5. ul{
  6.     list-style:none;
  7. }
  8. #bigbox{
  9.     width: 800px;
  10.     height: 600px;
  11.     background: paleturquoise;
  12. }
  13. #box{
  14.     width: 100px;
  15.     height: 210px;
  16.     background: ghostwhite;
  17.     color: black;
  18.     position: absolute;    
  19.     display: none;
  20.     border:1px solid gainsboro;
  21.     box-shadow: 5px 5px 5px gainsboro;
  22.     
  23. }
  24. #box li{
  25.     width: 100px;
  26.     height: 30px;
  27.     border: 1px solid gainsboro;
  28.     border-bottom: 1px;
  29.     cursor: pointer;
  30.     
  31. }
  32. #box li:hover{
  33.     background: palegreen;
  34.     color: white;
  35. }
js代码：

点击(此处)折叠或打开

  1. window.onload =function(){
  2.     var bigbox= document.getElementById("bigbox");
  3.     console.log(bigbox);
  4.     var box = document.getElementById("box");
  5.     console.log(box);
  6.     bigbox.oncontextmenu = function(event){
  7.     //阻止浏览器默认事件的（ie）非ie的兼容性写法
  8.         box.style.display = "block";
  9.         var e = event || window.event;
  10.         if(e.stopPropagation){
  11.             e.stopPropagation();
  12.         }else{
  13.             e.cancelBubble = true;
  14.         }
  15.         if(e.preventDefault){
  16.             e.preventDefault();
  17.         }
  18.         else{
  19.             e.returnValue = false;
  20.         }
  21.         //获取鼠标的坐标
  22.         var x = event.clientX;
  23.         var y = event.clientY;
  24.         //判断鼠标y轴的临界值
  25.         if(y<=300){
  26.             box.style.top = y+"px";
  27.         }else{
  28.             box.style.top = y-205+"px";
  29.         }
  30.          //判断鼠标x轴的临界值
  31.         if(x<=700){
  32.             box.style.left = x+"px";
  33.         }else{
  34.             box.style.left = x-100+"px";
  35.         }
  36.     }
  37.     bigbox.onclick = function(){
  38.                 box.style.display = "none";
  39.     }
  40.     document.oncontextmenu = function(){
  41.         
  42.     }
  43. }



阅读(1186) | 评论(0) | 转发(0) |
0

上一篇：微博 发布 及 回复框

下一篇：JavaScript 拖拽的制作

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6