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 相关文章推荐
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
Jan 13 Javascript
jQuery Ajax请求状态管理器打包
May 03 Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
Jun 09 Javascript
如何将网页表格内容导入excel
Feb 18 Javascript
js面向对象编程之如何实现方法重载
Jul 02 Javascript
JavaScript中的getMilliseconds()方法使用详解
Jun 10 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
May 16 Javascript
jQuery限制图片大小的方法
May 25 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
Jun 08 Javascript
vue一步步实现alert功能
Jul 05 Javascript
详解vue-cli之webpack3构建全面提速优化
Dec 25 Javascript
微前端qiankun改造日渐庞大的项目教程
Jun 21 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
SMARTY学习手记
2007/01/04 PHP
php二维数组排序详解
2013/11/06 PHP
javascript实现上传图片并预览的效果实现代码
2011/04/11 Javascript
利用谷歌地图API获取点与点的距离的js代码
2012/10/11 Javascript
javascript的offset、client、scroll使用方法详解
2012/12/25 Javascript
jquery及原生js获取select下拉框选中的值示例
2013/10/25 Javascript
JQ技术实现注册页面带有校验密码强度
2015/07/27 Javascript
jquery实现简单的二级导航下拉菜单效果
2015/09/07 Javascript
基于jquery实现无限级树形菜单
2016/03/22 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
2016/05/25 Javascript
jQuery限制图片大小的方法
2016/05/25 Javascript
JS中Swiper的使用和轮播图效果
2017/08/11 Javascript
原生JS实现列表子元素顺序反转的方法分析
2018/07/02 Javascript
微信小程序form表单组件示例代码
2018/07/15 Javascript
vue.js实现带日期星期的数字时钟功能示例
2018/08/28 Javascript
vue实现购物车抛物线小球动画效果的方法详解
2019/02/13 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
2019/04/17 Javascript
优雅的使用javascript递归画一棵结构树示例代码
2019/09/22 Javascript
JQuery省市联动效果实现过程详解
2020/05/08 jQuery
Python远程桌面协议RDPY安装使用介绍
2015/04/15 Python
numpy数组拼接简单示例
2017/12/15 Python
Python Tkinter实现简易计算器功能
2018/01/30 Python
Python使用try except处理程序异常的三种常用方法分析
2018/09/05 Python
Python变量类型知识点总结
2019/02/18 Python
Python列表对象实现原理详解
2019/07/01 Python
Python画图高斯分布的示例
2019/07/10 Python
pyecharts绘制中国2020肺炎疫情地图的实例代码
2020/02/12 Python
Django实现随机图形验证码的示例
2020/10/15 Python
Python paramiko使用方法代码汇总
2020/11/20 Python
一套带答案的C++笔试题
2014/01/10 面试题
秋季运动会稿件
2014/01/30 职场文书
大学生优秀自荐信范文
2014/02/25 职场文书
党员对照检查材料
2014/09/22 职场文书
法制教育观后感
2015/06/17 职场文书
2015中秋节晚会开场白
2015/07/30 职场文书
Java生成读取条形码和二维码的简单示例
2021/07/09 Java/Android