<!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. List集合实现简易学生管理

    题目: 代码: package org.wlgzs; import java.util.ArrayList; import java.util.List; import java.util.Scann ...

  2. 如果恨一个程序员，忽悠他去做iOS开发

    如果你恨一个程序员,忽悠他去做iOS开发.不管他背景是cobel还是 java,送他一本iOS开发的书.这种书最好是国人写的,容易以偏概全一点,相比洋鬼子的书,更容易学到皮毛.这叫舍不得孩子套不着狼, ...

  3. fastjson 简单使用 及其JSONObject使用

    阿里巴巴FastJson是一个Json处理工具包,包括“序列化”和“反序列化”两部分,它具备如下特征:速度最快,测试表明,fastjson具有极快的性能,超越任其他的Java Json parser. ...

  4. Wannafly14挑战赛 C（tarjan缩点）题解

    题目:牛客题目链接 思路:这道题有点像这道题 先缩点,缩完之后判断一下整个强连通分量入度是不是0,如果是的话向ans压入该强连通分量最小的那个值.最后排序一下ans输出就行了. 思路一下就想到了,就是 ...

  5. SqlBulkCopy Precision Error from C# Double to Sql Decimal?

    https://forums.asp.net/t/1300113.aspx?SqlBulkCopy+Precision+Error+from+C+Double+to+Sql+Decimal+ Befo ...

  6. Linux下替换默认版本的protobuf

    1. 下载 下载地址,我下载的是protobuf-all-3.5.0.tar.gz,尽量下载all,里面包含protobuf库的所有文件. 2. 编译 ./configure make make in ...

  7. 项目梳理4——WebApi项目，使用注释填充Description字段

    web.config中添加连接字符串: 为webapi添加Description,使用注释来填充此字段 对于所有引用的xxxx.base项目设置生成的xml文档,注意release.debug下都需设 ...

  8. DDSM数据处理之PngWithOverlay 框出病灶区域

    修改代码路径 若overlay是某一侧的标注. 文件夹里某一侧的png 应该有对应 某一侧的overlay 这样一一对应才可以使得代码运行. 否则需要手动删除没有overlay的png图片. 左侧没有 ...

  9. python 元组列表转为字典

    #create a list l = [(), (), (), (), (), ()] d = {} for a, b in l: d.setdefault(a, []).append(b) prin ...

  10. 转载：oracle 11g ADG实施手册（亲测，已成功部署多次）

    https://www.cnblogs.com/yhfssp/p/7815078.html 一:实验环境介绍 虚拟机系统: RHEL Linux 6.4(64位) 数据库版本: Oracle 11gR ...