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

一、一些概念：

　　1、鼠标事件有一个botton属性：返回一个整数，用于表示点击的是哪个鼠标按键。
　　BUG：在IE和标准DOM的鼠标事件中，唯一一个button属性值相同的是“单击右键”事件，都返回2。

　　2、事件onmousedown：表示鼠标按键按下的动作。
　　　 事件oncontextmenu：点击鼠标触发的另一个事件。

　　3、中断默认事件处理函数的方法：IE中设置returnValue=false;  标准DOM中调用preventDefault()方法。

　　4、事件对象：①在IE中，事件对象是window对象的一个event属性。

　　　　　　　　　　声明：

　　　　　　　　 ②在标准DOM中，事件对象是事件处理函数的唯一参数。

　　　　　　　　　　声明：

　　　　　　解决兼容性：

二、实现：

HTML：


代码如下:

<p id="p1">Uncle Cat is a fat white cat !</p>
    <div id="d1">
        <a>剪切</a>
        <a>复制</a>
        <a>粘贴</a>
    </div>

javascript：


代码如下:

window.onload=function(){
    rightmenu('p1','d1');
}
/****
*　　　　　封装右键菜单函数：
*　　　　elementID   要自定义右键菜单的 元素的id
*　　　　menuID　　　 要显示的右键菜单DIv的 id
*/
function rightmenu(elementID,menuID){
　　var menu=document.getElementById(menuID);      //获取菜单对象
　　var element=document.getElementById(elementID);//获取点击拥有自定义右键的 元素
　　element.onmousedown=function(aevent){         //设置该元素的 按下鼠标右键右键的 处理函数
　　　　if(window.event)aevent=window.event;      //解决兼容性
　　　　if(aevent.button==2){                   //当事件属性button的值为2时，表用户按下了右键
　　　　　　document.oncontextmenu=function(aevent){
   　　　　if(window.event){
       　　　　aevent=window.event;
　　　　　　　　aevent.returnValue=false;         //对IE 中断 默认点击右键事件处理函数
　　　　　　}else{
　　　　　　　　aevent.preventDefault();          //对标准DOM 中断 默认点击右键事件处理函数
　　　　　　};
　　　　};
　　　　menu.style.cssText='display:block;top:'+aevent.clientY+'px;'+'left:'+aevent.clientX+'px;'
　　　　//将菜单相对 鼠标定位
　　　　}
　　}
　　menu.onmouseout=function(){                  //设置 鼠标移出菜单时 隐藏菜单
　　　　setTimeout(function(){menu.style.display="none";},400);
　　}
}

赞 (0)

相关推荐

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

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

  • JS简单实现自定义右键菜单实例

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

  • javascript自定义右键弹出菜单实现方法

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

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

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

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

  • 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

  • JS实现的自定义右键菜单实例二则

    JS实现的自定义右键菜单实例二则

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

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

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

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

  • javascript自定义右键菜单插件

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

  • Flex自定义右键菜单具体实现

    1.自定义右键菜单注册类: 项目中新增注册类 RightClickManager,代码如下: 复制代码 代码如下: package com.siloon.plugin.rightClick { import flash.display.DisplayObject; import flash.display.InteractiveObject; import flash.events.ContextMenuEvent; import flash.events.MouseEvent; import

  • jquery实现在网页指定区域显示自定义右键菜单效果

    jquery实现在网页指定区域显示自定义右键菜单效果

    本文实例讲述了jquery实现在网页指定区域显示自定义右键菜单效果.分享给大家供大家参考.具体如下: 这是一个jquery实现的网页右键菜单效果,与其它自定义的右键菜单不同之处在于,本菜单只在指定区域内才有效,若超出指定区域的话,点击右键后显示的仍是浏览器的右键菜单.运行效果后,请在橘色区域内点击鼠标右键,会弹出一个带图标的自定义右键菜单,和浏览器的右键菜单完全不一样哦! 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-web-ar

  • jQuery实现自定义右键菜单的树状菜单效果

    jQuery实现自定义右键菜单的树状菜单效果

    本文实例讲述了jQuery实现自定义右键菜单的树状菜单效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery的自定义右键菜单,在树状结构的子节点(下级没有节点)上单击右键才会弹出自定义菜单,而且菜单是自动根据鼠标位置来定位的.当鼠标在菜单以外的任意空白处单击一下后会自动消失.这里想特别说明一点所谓的"菜单以外",可以有两种解剖方式--1.除了鼠标在菜单区域内的所有位置:2.如下图所示的A.B.C.D四个区域.显然用第一种方法来剖析会更简单直接一点.源码中的!IsInArea就

  • Javascript实现的简单右键菜单类

    Javascript实现的简单右键菜单类

    本文实例讲述了Javascript实现的简单右键菜单类.分享给大家供大家参考.具体如下: 这是自己写的一个右键菜单类,屏蔽掉了IE固有的右键菜单,一共有四个参数:第一个是出发显示右键菜单的div的id 第二个是右键菜单这个层的id,根据这个id去创建一个新的层,menuList是菜单项的列表,对应了点击一个菜单项后触发的函数,classList是菜单的class名称,以及菜单项对应的class名称,包含了鼠标滑过时的class. 运行效果截图如下: 在线演示地址如下: http://demo.j

  • vue中如何自定义右键菜单详解

    在所编辑的页面,需要添加右键菜单的元素,绑定contextmenu事件,如下: <li v-for="item in resourceList" :key="item.id" @click="handleClickFolder(item)" @contextmenu.prevent="openMenu($event,item)" > </li> 在页面编写右键菜单内容: <ul v-show=&q

  • 原生js自定义右键菜单

    本文实例为大家分享了js自定义右键菜单的具体代码,供大家参考,具体内容如下 1.右键菜单触发的基本过程 实现自定义右键菜单我们首先需要了解以下内容: 浏览器默认的右键菜单触发的基本过程 1).单击右键,菜单出现 2).菜单出现,鼠标箭头一直在菜单左上角 3).再换个位置点击右键,原菜单消失,新菜单出现在指定位置 4).点击左键,中键,菜单消失 以上为大致实现过程,不全面,仅供参考 也许文字过于抽象,我们来看看代码吧: 2.HTML结构 <!--start右键菜单的结构--> <div i

  • JS自定义右键菜单实现代码解析

    今天来讲一个关于右键菜单的小demo,抛砖引玉. 首先,我们要用css和html做一个自定义右键菜单. <!--自定义右键菜单html代码--> <div id="menu"> <div class="menu">功能1</div> <div class="menu">功能2</div> <div class="menu">功能3</di

随机推荐