js右键生成菜单
<!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右键生成菜单的更多相关文章
- js控制json生成菜单——自制菜单(一)
此文档解决以下问题: 1.JSON文件的书写方式 2.jQuery.getJSON()的运用 3.jQuery.each()的运用 4.jQuery的DOM 操作方法之一:.append()的运用 5 ...
- js的鼠标右键简单菜单
实现点击鼠标右键时出来菜单代码如下: 主要运用oncontextmenu事件,oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单. <!DOCTYPE html> ...
- paip.网页右键复制菜单限制解除解决方案
paip.网页右键复制菜单限制解除解决方案 作者Attilax 艾龙, EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http://blog.csdn.net ...
- win8.1右键新建菜单添加新建php文件
最近在学习php没使用IDE,一直使用编辑器,但每次新建文件都要手动该扩展名比较麻烦.于是想着能不能在右键新建菜单直接新建php文件.于是开始百度... 步骤一:win+R打开运行(管理员身份运行) ...
- 16. Ext.ux.TabCloseMenu插件的使用(TabPanel右键关闭菜单) 示例
转自:https://crabdave.iteye.com/blog/327978 Ext.ux.TabCloseMenu插件的使用(TabPanel右键关闭菜单) 示例 效果: 创建调用的HTML: ...
- html中实现某区域内右键自定义菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- WPF+通过配置文件生成菜单(Menu)+源码
这个月做项目,遇到过一个通过配置文件来生成菜单的解决方案,感觉挺优雅的,特地放到博客园来,以飨读者. 说来惭愧,以前做的项目都没有这样用过,都是固定死了.如果后续有需要加入菜单,还得在重新修改UI,然 ...
- JS动态生成的元素,其对应的方法不响应(比如单击事件,鼠标移动事件等)
主要原因:在页面给元素注册点击事件的时候[ $(function () { XXX }); ],JS动态生成的元素还尚未生成,所以click事件就没有生效 解决方法: 方案一:js动态生成元素后再给 ...
- js无限级树菜单
以前做网站,树形菜单一般都很简单,自己定义风格样式,简单的js控制,后来原来网上很多文章都在讨论Js树型菜单,看了几个实例,发现这个树比较简单好用. http://hovertree.com/texi ...
- chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法[bubuko.com]
chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法,原文:http://bubuko.com/infodetail-328671.html 默认情况下如下图 Y轴并不是从0开始 ...
随机推荐
- python中操控excel的几个库:xlwt,xlrd,xlutils
一.xlrd和xlwt模块介绍 xlrd模块提供在任何平台上从excel电子表格(.xls和.xlsx)中提取数据的功能,xlwt模块提供生成与Microsoft Excel 95 到2003版本兼容 ...
- Vue项目安装less和less-loader
第一步: 查看webpack和webpack-cli是否安装打开cmd,通过命令查看 webpack -v webpack-cli -v 如果没有安装,要先进行安装 可以通过 npm view web ...
- react 05 router
安装 npm i react-router-dom -- save<Router basename="/admin"> <Route path="/&q ...
- LinkedList的线程安全解决办法
方法一:List<String> list = Collections.synchronizedList(new LinkedList<String>()); 方法二:将Lin ...
- c++的double转string(转)
原文地址:https://www.cnblogs.com/finallyliuyu/p/1810071.html c++中double转换成string型(浮点数的格式化)(转) 在日常编程中-- ...
- 基于GPU 显卡在k8s 集群上实现hpa 功能
前言 Kubernetes 支持HPA模块进行容器伸缩,默认支持CPU和内存等指标.原生的HPA基于Heapster,不支持GPU指标的伸缩,但是支持通过CustomMetrics的方式进行HPA指标 ...
- list变成String类型
list变成String类型 CollectionUtils.isEmpty(vo.getImgs())?"" : String.join(";", (Stri ...
- 下载nodejs和vue
下载nodejs https://nodejs.org/en 下载或更新npm npm install cnpm -g npm install -g vue 全局安装 创建一个基于 "web ...
- seql sever INSERT语句简介
INSERT语句简介 要向表中添加一行或多行,可以使用INSERT语句.下面说明了INSERT语句的最基本形式: INSERT INTO table_name (column_list) VA ...
- centos6 编译安装 mysql5.6----------centos7编译安装MySQL5.7
centos6 编译安装 mysql5.6 安装依赖包 yum install -y ncurses-devel libaio-devel 安装cmake编译工具 cmake 定制功能:存储引擎.字 ...