<!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. noip 瑞士轮 - 归并

    背景 在双人对决的竞技性比赛,如乒乓球.羽毛球.国际象棋中,最常见的赛制是淘汰赛和循环赛.前者的特点是比赛场数少,每场都紧张刺激,但偶然性较高.后者的特点是较为公平,偶然性较低,但比赛过程往往十分冗长 ...

  2. POJ 2029 （二维树状数组）题解

    思路: 大力出奇迹,先用二维树状数组存,然后暴力枚举 算某个矩形区域的值的示意图如下,代码在下面慢慢找... 代码: #include<cstdio> #include<map> ...

  3. 【Git安装】centos安装git

    1 yum install git 安装后的默认存放地点/usr/bin/git

  4. 复习_for循环嵌套 及 流程图梳理

    原题: 使用for循环输出如下图形: * ** *** **** 分析及做法. 图链接: https://www.processon.com/view/link/5afba745e4b05352c2b ...

  5. Facebook广告API系列 2 - Audience Management

    Facebook广告API系列 2 Facebook marketing API有三大组成部分: Audience Management Ads Management Ads Insights 本篇稍 ...

  6. 1、Python快速入门(0529)

    学习来自马哥教育的视频,感谢马哥 编程语言: 用户: 问题空间 计算机:解决问题 解空间 抽象: 机器代码-->微码编程-->高级语言 (语言的高下级的是根据语言是否被人类容易理解或者更接 ...

  7. H5本地存储二

    众所周知,H5的storage有sessionstorage&localStorage,其中他们的共同特点是API相同 下面直接上代码,storage中的存储与删除: <!DOCTYPE ...

  8. TCGA系列--fusion

    http://www.tumorfusions.org/ 其他: COSMIC has a list of "curated fusion" http://cancer.sange ...

  9. hdu 1796 How many integers can you find 容斥定理

    How many integers can you find Time Limit: 12000/5000 MS (Java/Others)    Memory Limit: 65536/32768 ...

  10. gpg: no valid OpenPGP data found. 解决办法

    在Ubuntu14.04 server(amd64)上面安装ros,运行命令 wget http://packages.ros.org/ros.key -O - | sudo apt-key add ...