<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="智能社 - zhinengshe.com" />

<meta name="copyright" content="智能社 - zhinengshe.com" />

<title>智能社 - www.zhinengshe.com</title>

<style>

*{margin:;padding:;list-style:none;}

#menu1{display:none; position:absolute;left:;top:;width:100px; border:1px solid #; overflow:hidden;}

#menu1 li{width:%; height:30px; line-height:30px; text-align:center; background:#ccc; border-bottom:1px solid #;}

#menu1 li:hover{ background:#c00; color:#fff;}

#ul1 li{float:left;width:200px; height:30px; line-height:30px; text-align:center; background:#ccc; border:1px solid #; margin:10px;}

</style>

<script>

window.onload = function(){

    var oUlMenu = document.getElementById("menu1");

    var aMLi = oUlMenu.children;

    var oUl = document.getElementById("ul1");

    var aLi = oUl.children;

    var currentLi = null;

    for(var i = ; i < aLi.length; i++){

        aLi[i].oncontextmenu = function(ev){

            currentLi = this;

            var oEvent = ev || event;

            oUlMenu.style.display = "block";

            oUlMenu.style.left = oEvent.clientX + "px";

            oUlMenu.style.top = oEvent.clientY + "px"

            return false;//禁止默认的鼠标右击出现选项弹窗，和oncontextmenu配合使用

        };

    }

    aMLi[].onclick = function(){

        currentLi.parentNode.removeChild(currentLi);

        oUlMenu.style.display = "none";

    };

    aMLi[].onclick = function(){

        currentLi.style.background = "red";

        oUlMenu.style.display = "none";

    };

    aMLi[].onclick = function(){

        currentLi.style.background = "green";

        oUlMenu.style.display = "none";

    };

};

</script>

</head>

<body>

<ul id="menu1">

    <li>删除</li>

    <li>变红</li>

    <li>变绿</li>

</ul>

<ul id="ul1">

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

</ul>

</body>

</html>

自定义oncontextmenu的更多相关文章

  1. 夺命雷公狗---DEDECMS----33dedecms自定义搜索以及分页功能完成

    我们现在要开始实现模版里面的搜索功能了,我们先找要做出一个检索提交表单,如下所示: 只要我们点击生成之后我们的表单就获取到了,可以直接拿生成好的html表单拿来用来测试下.. 将他嵌入首页的模版文件, ...

  2. JavaScript自定义右键菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. js禁止默认的右键菜单或出现自定义右键菜单

    1.屏蔽默认的右键菜单 js: document.getElementById('myimg').oncontextmenu=function(){return false;} jquery: $(' ...

  4. javascript自定义浏览器右键菜单

    javascript自定义浏览器右键菜单   在书上看到document对象还有一个contextmenu事件,但是不知为什么w3school中找不到这个耶... 利用这个特性写了个浏览器的右键菜单, ...

  5. JS简单实现自定义右键菜单

    RT,一个简单的例子,仅仅讲述原理 <div id="menu" style="width: 0;height: 0;background: cadetblue;p ...

  6. 富文本编辑器UEditor自定义工具栏（二、插入图片、音频、视频个性化功能按钮和弹层及自定义分页符）

    导读:本篇将简单探讨插入图片.音频.视频的功能按钮实现方式 传送门:富文本编辑器UEditor自定义工具栏(一.基础配置与字体.背景色.行间距.超链接实现) 一.效果图 1.UEditor自定义工具栏 ...

  7. JS自定义鼠标右击菜单

    自定义鼠标右击菜单要素: 禁止页面默认右击事件 设置右击菜单的样式以及菜单出现的位置(通过捕获鼠标点击位置来确定菜单的位置) 鼠标在指定控件(区域)上右击时显示菜单(默认菜单隐藏,点击鼠标右键时显示) ...

  8. JavaScript自定义鼠标右键菜单

    下面为JavaScript代码 window.onload = function () { //好友列表 var f = 0; //判断指定id的元素在页面中是否存在 if (document.get ...

  9. 1)jquery validate 远程验证remote,自定义验证 , 手机号验证 2)bootstrap validate 远程remote验证的方法.

    1)jquery  validate 远程验证remote,自定义验证 1-1: js <script src="YYFramework/Public/js/jquery-3.1.1. ...

随机推荐

  1. [LeetCode] 701. Insert into a Binary Search Tree

    Given the root node of a binary search tree (BST) and a value to be inserted into the tree, insert t ...

  2. 解决Type safety: The expression of type List needs

    解决Type safety: The expression of type List needs unchecked conversion to conform to 在方法前加上这句话就可以了@Su ...

  3. babun安装，整合到cmder

    babun Babun的特性: 预装了Cygwin以及许多的插件 默认的命令行安装工具,没有管理员权限要求. 预装了 pact工具,一个高级的包管理器,类似 apt-get或yum xTerm-256 ...

  4. win7下把电脑设置成wlan热

    有很多公司没有无线网,只有自己的电脑可以上网,现在设置热点,可以手机上网 步骤: 1.看自己的网卡是否支持承载网络,如果不支持,本法就不适用 在CMD里用    netsh wlan show dri ...

  5. IHttpHandler IHttpModule

    ASP.Net处理Http Request时,使用Pipeline(管道)方式,由各个HttpModule对请求进行处理,然后到达 HttpHandler,HttpHandler处理完之后,仍经过Pi ...

  6. How to force https on amazon elastic beanstalk

    假设您已在负载平衡器安全组中启用https,将SSL证书添加到负载平衡器,将443添加到负载平衡器转发的端口,并使用Route 53将您的域名指向Elastic Beanstalk环境(或等效DNS服 ...

  7. [Pytorch]Pytorch中tensor常用语法

    原文地址:https://zhuanlan.zhihu.com/p/31494491 上次我总结了在PyTorch中建立随机数Tensor的多种方法的区别. 这次我把常用的Tensor的数学运算总结到 ...

  8. LA 4080 战争和物流（最短路树）

    https://vjudge.net/problem/UVALive-4080 题意:给出一个n个结点m条边的无向图,每条边上有一个正权.令c等于每对结点的最短路长度之和.不连通的两点的最短路长度视为 ...

  9. UVa 1632 阿里巴巴（区间DP）

    https://vjudge.net/problem/UVA-1632 题意: 直线上有n个点,其中第i个点的坐标是xi,且它会在di秒之后消失.Alibaba可以从任意位置出发,求访问完所有点的最短 ...

  10. UVa 714 抄书（贪心+二分）

    https://vjudge.net/problem/UVA-714 题意:把一个包含m个正整数的序列划分成k个非空的连续子序列,使得每个正整数恰好属于一个序列.设第i个序列的各数之和为S(i),你的 ...