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

2024-10-20 06:15:16

本文实例讲解了javascript鼠标右键菜单的实现方法，分享给大家供大家参考，具体内容如下

效果图：

具体代码：

<html>
  <head>
    <meta charset="gb2312" />
    <title></title>
    <style>
      #menu{
        border:solid 1px gray;
        width:100px;
        display:none;
        position:absolute;
        background-color:ghostwhite;
        margin: 0;
        padding: 0;
        list-style-type: none;
      }
      #menu>li{
        border-bottom: dashed 1px gray;
      }
    </style>
    <script type="text/javascript">
    window.onload=function(){
      var oUl=document.getElementById('menu');
        document.oncontextmenu=function(ev){
          var oEvent=ev||event;
          //一定要加px，要不然chrom不认
          oUl.style.top=oEvent.clientY+'px';
          oUl.style.left=oEvent.clientX+'px';
          oUl.style.display='block';
          return false;
        }
        document.onclick=function(){
          oUl.style.display='none';
        }
    };
    </script>
  </head>
  <body>
<ul id="menu">
  <li><a href="http://www.jb51.net/" target="_blank">我们</a></li>
  <li><a href="http://www.jb51.net/" target="_blank">我们</a></li>
  <li><a href="http://www.jb51.net/" target="_blank">我们</a></li>
  <li><a href="http://www.jb51.net/" target="_blank">我们</a></li>
</ul>
  </body>
</html>

希望本文所述对大家学习javascript程序设计有所帮助。

js自定义鼠标右键的实现原理及源码

今天来记录下js来自定义鼠标右键,同样先来分解下它的实现原理: 1.屏蔽右键默认事件:(一度我以为修改的就是默认事件) 2.对一个ul的隐藏:(这个我也曾迂腐的认为值得这样操作的都是div,汗) 3.对鼠标点击右键做出的响应,显示隐藏的ul: 4.鼠标重新点击后,ul重新被隐藏这样来看的话,我们需要做的事情是不是就简单了很多,先上代码: html部分 <ul id="testRight" style="width: 100px;background-color: ye
JS实现的自定义右键菜单实例二则

本文实例讲述了JS实现的自定义右键菜单.分享给大家供大家参考.具体如下: 示例1: 运行效果截图: 具体代码如下: <!DOCTYPE html> <html> <head> <title>JS实现自定义右键菜单</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <script src=&
JS简单实现自定义右键菜单实例

RT,一个简单的例子,仅仅讲述原理复制代码代码如下: <div id="menu" style="width: 0;height: 0;background: cadetblue;position: absolute"></menu> 假设我要把上面这个div设置为右键菜单,先随意美化一下. 原理就是利用contextmenu事件,右键点击时,会触发这个事件时,该事件对象可以获得鼠标距离页面左上角的距离clientX和clientY, 我
JavaScript 对任意元素,自定义右键菜单的实现方法

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

本文实例为大家分享了右键自定义菜单的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #menu { height: 200px; width: 50px; border: 1px solid gray; back
js实现完全自定义可带多级目录的网页鼠标右键菜单方法

本文实例讲述了js实现完全自定义可带多级目录的网页鼠标右键菜单方法.分享给大家供大家参考.具体分析如下: 这是很不错的一个网页鼠标特性,这个代码可以控制网页中鼠标的右键菜单,完全按照你的意思打造,可以带多级的目录显示. 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
Js实现自定义右键行为

自定义右键行为(通过事件对象获得鼠标的坐标(x,y)) <!doctype html> <html> <head> <meta charset="UTF-8"> <title>demo</title> <style type="text/css"> html{ height:100%; } body{ height:100%; } #mydiv{ width:300px; heigh
javascript自定义右键弹出菜单实现方法

本文实例讲述了javascript自定义右键弹出菜单实现方法.分享给大家供大家参考.具体实现方法如下: <head runat="server"> <title>无标题页</title> <script type="text/javascript"> var oPopup = window.createPopup(); function PopMenu(id) { var oPopBody = oPopup.docum
javascript鼠标右键菜单自定义效果

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

自定义html元素鼠标右键菜单实现思路在触发contextmenu事件时,取消默认行为(也就是阻止浏览器显示自带的菜单),获取右键事件对象,来确定鼠标的点击位置,作为显示菜单的left和top值编码实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> window.onload = function(){ var menu = document.
javascript全局自定义鼠标右键菜单

本文实例为大家分享了javascript全局自定义鼠标右键菜单的具体代码,供大家参考,具体内容如下前言 html全局自定义鼠标右键菜单一.效果展示二.源代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #TextBox{ width: 2
javascript局部自定义鼠标右键菜单

本文实例为大家分享了js局部自定义鼠标右键菜单的具体代码,供大家参考,具体内容如下前言 html局部自定义鼠标右键菜单局部! 局部! 局部! 重要的关键词说三遍! 一.效果展示二.源代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #Te
JavaScript模拟鼠标右键菜单效果

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

添加右键菜单,首先我们要监听鼠标右键点击的操作,我们知道鼠标右键事件名是 contextmenu,当鼠标在 html 元素之上,点击鼠标右键,便会触发 contextmenu 事件,在 contextmenu 事件的回调函数中实现相应的显示菜单功能即可. 那么在 openlayers 中,在地图中添加这个事件,我们从哪里下手呢?首先我们得了解 openlayers 的初始化页面的过程. openlayers 初始化页面过程 openlayers 也是一个前端库,那么它肯定离不开 html 的运用
DataGridView右键菜单自定义显示及隐藏列功能

WinForm程序中表单的列可自定义显示及隐藏,是一种常见的功能,对于用户体验来说是非常好的.笔者经过一段时间的摸索,终于实现了自己想要的功能及效果,现记录一下过程: 1.新建一个自定义控件,命名为:PopupMenuControl. 2.在PopupMenuControl.Designet文件中的InitializeComponent()方法下面,注册以下事件: this.Paint += new System.Windows.Forms.PaintEventHandler(this.Popu
基于JavaScript实现右键菜单和拖拽功能

下面先给大家介绍下js实现的右键菜单功能,具体详情如下所示: 这一章解决的问题 1.实现右键菜单功能代码. 2.阻止默认事件的实际应用. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>右键菜单</title> <style type="text/css"> #menu {
vue contextmenujs鼠标右键菜单高度不够显示不全的问题及解决方法

之前是采用npm或者yarn直接装包vue-contextmenujs的形式: npm install vue-contextmenujs -S || yarn add vue-contextmenujs 当右键点击记录时,完整展示应该是如下图所示: 结果,当点击靠前的记录时,顶部一部分记录被浏览器给遮挡了,如下图所示: 由于是使用的第三方开源组件,所以我直接将组件源码下载下来,然后修改组件源码,通过直接在源码中引入组件的形式调用.组件github仓库地址:https://github.com/

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

相关推荐

随机推荐