Javascript实现鼠标右键特色菜单


Posted in Javascript onAugust 04, 2015

在Web端,通常是不需要右键菜单,各个浏览器也有自己的右键菜单。但是对于一些特殊的网页,是需要右键菜单来增加用户体验的,比如百度音乐,QQ邮箱,相信大家都在Web端使用过右键菜单了,现在来分享一下如何实现,比较简单。

运行代码:

window.onload = function() {
      document.oncontextmenu = block;
      document.body.onmouseup = function(event) {
        if (!event) event = window.event;
        if (event.button == 2) {
          var x = event.pageX || event.clientX;
          var y = event.pageY || event.clientY;
          document.getElementById("contextMenu").style.left = x  "px";
          document.getElementById("contextMenu").style.top = y  "px";
          document.getElementById("contextMenu").style.display = "block";
        }
      }
      //阻止事件冒泡
      document.getElementById("contextMenu").onclick = function(event) {
        event.stopPropagation();
      }
      //点击其他地方隐藏
      document.onclick = function() {
        document.getElementById("contextMenu").style.display = "none";
      }
      for (var i = 0; i < getElementsByClassName("contextMenuItem").length; i ) {
 
        getElementsByClassName("contextMenuItem")[i].onclick = function(event) {
          event = event ? event : window.event
          var target = event.srcElement ? event.srcElement : event.targe;
          document.getElementById("contextMenu").style.display = "none";
          //alert("您点击了: "  target.innerHTML);
           
        }
      }
 
    }
     
    function block(event) {
      if (window.event) {
        event = window.event;
        event.returnValue = false;
      } else event.preventDefault();
    }
    //兼容IE不支持getElementsByClassName
    function getElementsByClassName(className, root, tagName) {
      if (root) {
        root = typeof root == "string" ? document.getElementById(root) : root;
      } else {
        root = document.body;
      }
      tagName = tagName || "*";
      if (document.getElementsByClassName) { 
        return root.getElementsByClassName(className);
      } else {
        var tag = root.getElementsByTagName(tagName); 
        var tagAll = [];
        for (var i = 0; i < tag.length; i ) {
          for (var j = 0, n = tag[i].className.split(' '); j < n.length; j ) {
            if (n[j] == className) {
              tagAll.push(tag[i]);
              break;
            }
          }
        }
        return tagAll;
      }
    }

效果图:

Javascript实现鼠标右键特色菜单

以上就是本文的全部内容,希望大家可以喜欢。

Javascript 相关文章推荐
复选框全选与全不选操作实现思路
Aug 18 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
Aug 10 Javascript
jQuery实现的漂亮表单效果代码
Aug 18 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
Jul 07 Javascript
解析预加载显示图片艺术
Dec 05 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
Feb 23 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
Apr 13 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
Nov 02 Javascript
JavaScript函数绑定用法实例分析
Nov 14 Javascript
Vue框架里使用Swiper的方法示例
Sep 20 Javascript
vue实现条件叠加搜索的解决方法
May 28 Javascript
JS数组的高级使用方法示例小结
Mar 14 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
Aug 04 #Javascript
常用的Javascript数据验证插件
Aug 04 #Javascript
网页收藏夹显示ICO图标(代码少)
Aug 04 #Javascript
实现音乐播放器的代码(html5+css3+jquery)
Aug 04 #Javascript
基于ajax实现文件上传并显示进度条
Aug 03 #Javascript
函数window.open实现关闭所有的子窗口
Aug 03 #Javascript
百度地图api如何使用
Aug 03 #Javascript
You might like
PHP5中虚函数的实现方法分享
2011/04/20 PHP
PHP连接MySQL数据的操作要点
2015/03/20 PHP
PHP实现的构造sql语句类实例
2016/02/03 PHP
在 Laravel 项目中使用 webpack-encore的方法
2019/07/21 PHP
ExtJS 2.0实用简明教程 之获得ExtJS
2009/04/29 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
2014/03/12 Javascript
Javascript 运动中Offset的bug解决方案
2014/12/24 Javascript
用js判断是否为360浏览器的实现代码
2015/01/15 Javascript
IE中鼠标经过option触发mouseout的解决方法
2015/01/29 Javascript
js实现文字跑马灯效果
2017/02/23 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
2017/03/01 Javascript
angular 服务的单例模式(依赖注入模式下)详解
2018/10/22 Javascript
JavaScript实现简单音乐播放器
2020/04/17 Javascript
通过说明与示例了解js五种设计模式
2019/06/17 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
2020/01/20 Javascript
Vue包大小优化的实现(从1.72M到94K)
2021/02/18 Vue.js
[01:11:15]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[03:17]DOTA2-DPC中国联赛1月29日Recap集锦
2021/03/11 DOTA
python 多进程通信模块的简单实现
2014/02/20 Python
详解Python3中ceil()函数用法
2019/02/19 Python
对Python函数设计规范详解
2019/07/19 Python
Python实现串口通信(pyserial)过程解析
2019/09/25 Python
python手机号前7位归属地爬虫代码实例
2020/03/31 Python
css3一款3D字体带阴影效果的实现步骤
2013/03/20 HTML / CSS
涂鸦板简单实现 Html5编写属于自己的画画板
2016/07/05 HTML / CSS
如何在网站上添加谷歌定位信息
2016/04/16 HTML / CSS
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
2016/03/21 HTML / CSS
受希腊女神灵感的晚礼服、鸡尾酒礼服和婚纱:THEIA
2018/04/15 全球购物
学生实习推荐信范文
2013/11/26 职场文书
专业幼师实习生自我鉴定范文
2013/12/08 职场文书
党员自我批评与反省材料
2014/02/10 职场文书
《落花生》教学反思
2014/02/25 职场文书
法律进社区实施方案
2014/03/21 职场文书
银行委托书范本
2014/04/04 职场文书
医学求职自荐信
2014/06/21 职场文书
起诉状范本
2015/05/20 职场文书