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 相关文章推荐
JS中使用FormData上传文件、图片的方法
Aug 07 Javascript
JS简单实现禁止访问某个页面的方法
Sep 13 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
Mar 10 Javascript
Angular实现下载安装包的功能代码分享
Sep 05 Javascript
js断点调试心得分享(必看篇)
Dec 08 Javascript
Node.js中sequelize时区的配置方法
Dec 10 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
浅谈React组件之性能优化
Mar 02 Javascript
ES6关于Promise的用法详解
May 07 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
Apr 10 Javascript
Vue 3.0中jsx语法的使用
Nov 13 Javascript
JS监听Esc 键触发事键
Apr 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
咖啡豆的最常见发酵处理方法,详细了解一下
2021/03/03 冲泡冲煮
php ci框架中加载css和js文件失败的解决方法
2014/03/03 PHP
Eclipse的PHP插件PHPEclipse安装和使用
2014/07/20 PHP
php include类文件超时问题处理
2015/02/06 PHP
PHP中十六进制颜色与RGB颜色值互转的方法
2019/03/18 PHP
js一组验证函数
2008/12/20 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
2012/08/24 Javascript
JS获取各种浏览器窗口大小的方法
2014/01/14 Javascript
jQuery中:reset选择器用法实例
2015/01/04 Javascript
如何用js实现鼠标向上滚动时浮动导航
2016/07/18 Javascript
jQuery获取select选中的option的value值实现方法
2016/08/29 Javascript
详解angular ui-grid之过滤器设置
2017/06/07 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
2018/07/05 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
2019/05/07 Javascript
vue使用video.js进行视频播放功能
2019/07/18 Javascript
layer.open组件获取弹出层页面变量、函数的实例
2019/09/25 Javascript
JS模拟实现京东快递单号查询
2020/11/30 Javascript
[52:20]DOTA2-DPC中国联赛正赛 SAG vs XGBO3 第一场 3月5日
2021/03/11 DOTA
Python的Bottle框架的一些使用技巧介绍
2015/04/08 Python
python实现爬虫下载美女图片
2015/07/14 Python
Python获取暗黑破坏神3战网前1000命位玩家的英雄技能统计
2016/07/04 Python
Python常用时间操作总结【取得当前时间、时间函数、应用等】
2017/05/11 Python
Python实现按特定格式对文件进行读写的方法示例
2017/11/30 Python
python进行两个表格对比的方法
2018/06/27 Python
对python 判断数字是否小于0的方法详解
2019/01/26 Python
Python获取Redis所有Key以及内容的方法
2019/02/19 Python
详解python调用cmd命令三种方法
2019/07/08 Python
python Yaml、Json、Dict之间的转化
2020/10/19 Python
阿里巴巴国际站:Alibaba.com
2016/07/21 全球购物
一加手机美国官方网站:OnePlus美国
2019/09/19 全球购物
介绍一下Transact-SQL中SPACE函数的用法
2015/09/01 面试题
销售业务员岗位职责
2014/01/29 职场文书
法律系毕业生自荐信范文
2014/03/27 职场文书
上课讲话检讨书范文
2015/05/07 职场文书
《中华上下五千年》读后感3篇
2019/11/29 职场文书
Requests什么的通通爬不了的Python超强反爬虫方案!
2021/05/20 Python