<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>右键菜单</title>

</head>

<style>

    *{

        margin: 0;

        padding: 0;

    }

    ul{

    list-style: none;

    width: 200px;

    padding: 10px;

    border: 1px solid black;

    display: none;

    position: absolute;

  }

ul li:hover{

 background: skyblue;

}

</style>

<body>

    <ul id="list">

        <li class="aaa">1111</li>

        <li class="bbb">2222</li>

        <li class="ccc">3333</li>

        <li class="ddd">4444</li>

    </ul>

    <script>

       document.addEventListener("contextmenu",function(evt){

       evt.preventDefault()

       list.style.display="block"

     if(x >= document.documentElement.clientWidth-list.offsetWidth){

     x=document.documentElement.clientWidth-list.offsetWidth

     }

     if(y >= document.documentElement.clientHeight-list.offsetHeight){

     y=document.documentElement.clientHeight-list.offsetHeight

     }

       var x=evt.clientX

       var y=evt.clientY

       list.style.left=x + "px"

       list.style.top=y + "px"

       })

    document.addEventListener("click",()=>{

    list.style.display="none"

     })

    list.onclick=function(evt){

        console.log("list",evt.target)

        if(evt.target.className==="aaa"){

           console.log(111111)

        }

    }

    </script>

</body>

</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>右键菜单</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    ul{
    list-style: none;
    width: 200px;
    padding: 10px;
    border: 1px solid black;
    display: none;
    position: absolute;
  }
ul li:hover{
 background: skyblue;
}
</style>
<body>
    <ul id="list">
        <li class="aaa">1111</li>
        <li class="bbb">2222</li>
        <li class="ccc">3333</li>
        <li class="ddd">4444</li>
    </ul>
    <script>
       document.addEventListener("contextmenu",function(evt){
       evt.preventDefault()
       list.style.display="block"
     if(x >= document.documentElement.clientWidth-list.offsetWidth){
     x=document.documentElement.clientWidth-list.offsetWidth
     }
     if(y >= document.documentElement.clientHeight-list.offsetHeight){
     y=document.documentElement.clientHeight-list.offsetHeight
     }
       var x=evt.clientX
       var y=evt.clientY
       list.style.left=x + "px"
       list.style.top=y + "px"
       })
    document.addEventListener("click",()=>{
    list.style.display="none"
     })
    list.onclick=function(evt){
        console.log("list",evt.target)
        if(evt.target.className==="aaa"){
           console.log(111111)
        }
    }
    </script>
</body>
</html>

js右键生成菜单的更多相关文章

  1. js控制json生成菜单——自制菜单（一）

    此文档解决以下问题: 1.JSON文件的书写方式 2.jQuery.getJSON()的运用 3.jQuery.each()的运用 4.jQuery的DOM 操作方法之一:.append()的运用 5 ...

  2. js的鼠标右键简单菜单

    实现点击鼠标右键时出来菜单代码如下: 主要运用oncontextmenu事件,oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单. <!DOCTYPE html> ...

  3. paip.网页右键复制菜单限制解除解决方案

    paip.网页右键复制菜单限制解除解决方案 作者Attilax  艾龙,  EMAIL:1466519819@qq.com  来源:attilax的专栏 地址:http://blog.csdn.net ...

  4. win8.1右键新建菜单添加新建php文件

    最近在学习php没使用IDE,一直使用编辑器,但每次新建文件都要手动该扩展名比较麻烦.于是想着能不能在右键新建菜单直接新建php文件.于是开始百度... 步骤一:win+R打开运行(管理员身份运行) ...

  5. 16. Ext.ux.TabCloseMenu插件的使用（TabPanel右键关闭菜单） 示例

    转自:https://crabdave.iteye.com/blog/327978 Ext.ux.TabCloseMenu插件的使用(TabPanel右键关闭菜单) 示例 效果: 创建调用的HTML: ...

  6. html中实现某区域内右键自定义菜单

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

  7. WPF+通过配置文件生成菜单（Menu）+源码

    这个月做项目,遇到过一个通过配置文件来生成菜单的解决方案,感觉挺优雅的,特地放到博客园来,以飨读者. 说来惭愧,以前做的项目都没有这样用过,都是固定死了.如果后续有需要加入菜单,还得在重新修改UI,然 ...

  8. JS动态生成的元素，其对应的方法不响应（比如单击事件，鼠标移动事件等）

    主要原因:在页面给元素注册点击事件的时候[ $(function () {  XXX }); ],JS动态生成的元素还尚未生成,所以click事件就没有生效 解决方法: 方案一:js动态生成元素后再给 ...

  9. js无限级树菜单

    以前做网站,树形菜单一般都很简单,自己定义风格样式,简单的js控制,后来原来网上很多文章都在讨论Js树型菜单,看了几个实例,发现这个树比较简单好用. http://hovertree.com/texi ...

  10. chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法[bubuko.com]

    chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法,原文:http://bubuko.com/infodetail-328671.html 默认情况下如下图 Y轴并不是从0开始 ...

随机推荐

  1. 昇腾AI新技能，还能预防猪生病？

    摘要:日前,由华为与武汉伯生科技基于昇腾AI合作研发的"思符(SiFold)蛋白质结构预测平台"正式推出,并成功应用于国药集团动物保健股份有限公司的猪圆环病毒疫苗研发中. 本文分享 ...

  2. MySQL联合索引的创建规则

    1.索引应该按照最常用于查询的列的顺序创建.这样可以最大程度地提高查询性能. 2.如果查询中包含的列与索引中的列顺序不一致,则无法使用索引.因此,如果您有多个查询,每个查询都包含不同的列,那么最好为每 ...

  3. 【转载】docker swarm集群中部署traefik和其他服务

    以下配置来自:https://blog.csdn.net/wave_sheep/article/details/104186192 感谢作者! traefik.yaml version: '3' se ...

  4. [网鼎杯2020]boom

    [网鼎杯2020]boom 分析 感觉比较友善,主要考查数学运算. 解析 解压之后发现是个exe文件,运行得到一个md5 查询: 输入明文得到: 下个挑战是解三元一次方程: 拿matlab算一下. s ...

  5. 马哥教育第一周作业N67044-张铭扬

    1. 图文并茂解释开源许可证 GPL.BSD.MIT.Mozilla.Apache和LGPL的区别? 1)MIT许可证:MIT是六种开源许可证中最自由宽容,它允许使用者自由修改后无需放置版权说明并且可 ...

  6. redis-centOS系统的环境安装

    近期要简单汇总一下Redis常用的方法,依赖环境配置,在网上看到一篇比较好的Redis环境搭建博客,分享给大家.因新版本Redis已不支持windowns,环境安装以centOS系统为主. 参考博客地 ...

  7. 任务队列神器：Celery 入门到进阶指南

    任务队列神器:Celery 入门到进阶指南 发布于2021-03-24 16:24:53阅读 1.9K0   1.什么是celery celery是一个简单,灵活.可靠的分布式任务执行框架,可以支持大 ...

  8. 手算推导BP神经网络

    一.神经元 下图的蓝色区域被称为一个"感知机"(Perceptron), 感知机是对信息进行编码.压缩.集成.融合的计算机智能接口系统. 说白了,就是在输入端输入X1~X7这7个输 ...

  9. 091_解析Callout XML 处理方式

    XML: <?xml version="1.0" encoding="iso-8859-1" ?> <results> <resu ...

  10. Linux系统Shell脚本第五章：shell数组、正则表达式及文件三剑客之AWK

    目录 一.shell数组 1.数组分类 2.定义数组方法 二.正则表达式 1.元字符 2.表示次数 3.位置锚定 4.分组 5.扩展正则表达式 三.文本三剑客之AWK 1.awk 2.使用格式 3.处 ...