js实现自定义右键菜单

本文实例为大家分享了js实现右键菜单的具体代码，供大家参考，具体内容如下

原理：

1.屏蔽默认的右键菜单

2.点击右键获取位置，让自定义菜单到点击位置上

3.点击左键，自定义菜单消失

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>右键菜单练习</title>
 <style>
 *{
  margin: 0;
  /*padding: 0;*/
 }
 ul{
  width: 120px;
  height: 150px;
  background-color: rgb(204,204,204);
  font-size: 22px;
  list-style: none;
  line-height: 50px;
  position: fixed;
  display: none;
 }
 li{
  background-color: rgb(238,238,238);
  padding-left: 15px;
 }
 </style>
</head>
<body>
<ul id="ul">
 <li>复制</li>
 <li>剪切</li>
 <li>粘贴</li>
</ul>
<script>
 //给document 添加 oncontextmenu 事件 取消默认的右键菜单的行为。
 //点击右键的时候，获得点击的位置。
 var ul = document.getElementById('ul');
 document.oncontextmenu=function(e){
 e=e||window.event;
 //屏蔽样式
 e.preventDefault?e.preventDefault():(e.returnValue=false);
 //获取坐标
 var x=e.clientX;//视口的位置
 var y=e.clientY;

 //显示菜单
 ul.style.display='block';
 ul.style.top=y+'px';
 ul.style.left=x+'px';
 };
 //点击左键 自定义菜单消失
 document.onclick=function () {
 ul.style.display='none';
 };
 //给每个li添加 鼠标进入(onmouseover)和鼠标离开(onmouseout)的事件
 var lis = document.querySelectorAll('li');
 for (let i = 0; i < lis.length; i++) {
 lis[i].onmouseover=function () {
  lis[i].style.backgroundColor='rgb(204,204,204)';
 };
 lis[i].onmouseout=function () {
  lis[i].style.backgroundColor='rgb(238,238,238)';
 }
 }

</script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • ExtJs grid行 右键菜单的两种方法

    在这下边: 方法一 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="gridContextMenu.aspx.cs" Inherits="gridContextMenu" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &

  • js禁止页面复制功能禁用页面右键菜单示例代码

    <body oncontextmenu="return false">禁用网页右键菜单,但是仍然可以使用快捷键复制. js代码禁用复制功能: 复制代码 代码如下: <script type="text/javascript"> document.body.onselectstart=document.body.oncontextmenu=function(){ return false;} </script> 注意这段代码必须放在

  • JavaScript 对任意元素,自定义右键菜单的实现方法

    JavaScript 对任意元素,自定义右键菜单的实现方法

    一.一些概念: 1.鼠标事件有一个botton属性:返回一个整数,用于表示点击的是哪个鼠标按键. BUG:在IE和标准DOM的鼠标事件中,唯一一个button属性值相同的是"单击右键"事件,都返回2. 2.事件onmousedown:表示鼠标按键按下的动作. 事件oncontextmenu:点击鼠标触发的另一个事件. 3.中断默认事件处理函数的方法:IE中设置returnValue=false;  标准DOM中调用preventDefault()方法. 4.事件对象:①在IE中,事件对

  • js右键菜单效果代码

    将以下代码添加到<head>与</head>之间  ---------------------------------- <script language='javascript'>  /*******以下内容可以修改***************/  var mname=new Array(  "首  页",  "修  改",  "下  载",  "删  除",  "新  建&q

  • javascript自定义右键菜单插件

    本文实例为大家分享了javascript自定义右键菜单插件的具体代码,供大家参考,具体内容如下 1.使用方式 js文件引入<script src="RightMenu.js"></script> 初始化: let rightMenu = new RightMenu({ targetId:'menu',//需要改变右键菜单的元素id menuItems: items//菜单项数据,json数组 }) 2.menuItems参数 items = [ { id: 'a

  • 深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制

    我记得在刚开始接触动态HTML及JavaScript时就接触过关于鼠标右键屏蔽的脚本代码,当时这些代码很多会用在防止浏览者未经允许的复制网页上的文字或者其他内容,后来的实际应用证明这种做法是不符合用户体验的,而且破解的方法也有很多,比如我曾经写过一篇文章讲解如何解除网页禁止复制的办法. 由此可见,限制右键及复制是不明智的做法,但是今天我仍然要谈谈关于禁止网页复制.右键菜单的事儿,因为随着网页APP技术的发展,网页应用和桌面应用之间的界限越来越模糊,有一些桌面程序实际上是由网页配合JavaScri

  • JS组件Bootstrap ContextMenu右键菜单使用方法

    JS组件Bootstrap ContextMenu右键菜单使用方法

    今天来总结下bootstrap的一个小组件的应用.好了,不说废话,进入正题吧. 一.ContextMenu介绍 一个需求:表格行调序,支持多选调序,并且可以不连续多选.什么意思呢?先来看看需要实现的效果图: 需求是:需要将选中的6.8.9行移动到第2行和第3行之间.撇开业务不说,单纯从技术层面来说,要想使用最少操作达到上述效果,博主想到了右键功能,如果能够在第2行或者第3行上面点击鼠标右键,通过右键菜单功能将选中的行移动到相应的位置,这样是不是最简单呢.说做咱就做,于是找组件,搜索"bootst

  • JavaScript模拟鼠标右键菜单效果

    JavaScript模拟鼠标右键菜单效果

    本文实例为大家分享了JavaScript模拟鼠标右键菜单的具体代码,供大家参考,具体代码如下 效果图: 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>右键菜单</title> <style type="text/css"> *{ margin: 0; padd

  • javascript鼠标右键菜单自定义效果

    javascript鼠标右键菜单自定义效果

    本文实例讲解了javascript鼠标右键菜单的实现方法,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <html> <head> <meta charset="gb2312" /> <title></title> <style> #menu{ border:solid 1px gray; width:100px; display:none; position:absolute; background-

  • js实现右键菜单功能

    本文解决的问题:1.实现右键菜单功能代码:2.阻止默认事件的实际应用. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>右键菜单</title> <style type="text/css"> #menu { position: fixed; left:0; top:0;

随机推荐