利用contextmenu事件,自定义右键
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
window.onload = function () {
var div1 = document.getElementById("div1");
var ul1 = document.getElementById("ul1");
div1.oncontextmenu = function (event) {
event.preventDefault();
var left = (event.clientX+10)+"px";
var right = (event.clientY-15)+"px"; ul1.hidden = false;
ul1.style.left = left;
ul1.style.top = right;
} window.onclick = function (event) {
ul1.hidden = true;
}
}
</script>
<style type="text/css">
ul {
list-style: none;
border: 1px red solid;
background: #00ff90;
position: absolute;
padding:2px;
} li {
margin:20px 0px;
}
span {
margin:5px 10px;
display:block;
text-align:center;
}
</style>
</head>
<body>
<div style="width:100px;border:solid 1px blue" id="div1">点击我啊,菜鸡</div>
<ul hidden="hidden" id="ul1">
<li><span>新浪微博</span></li>
<li><span>QQ空间</span></li>
<li><span>QQ</span></li>
</ul>
</body>
</html>
利用contextmenu事件,自定义右键的更多相关文章
- HTML5事件-自定义右键菜单
WEB领域中,为实现上下文菜单,开发人员面临的主要问题是如何确定应该显示这个上下文菜单(Windows 中,右键单击:Mac 中,Ctrl+单击), 以及如何屏蔽与该操作相关联的默认上下文菜单. 解决 ...
- ASP.NET Aries 入门开发教程8:树型列表及自定义右键菜单
前言: 前面几篇重点都在讲普通列表的相关操作. 本篇主要讲树型列表的操作. 框架在设计时,已经把树型列表和普通列表全面统一了操作,用法几乎是一致的. 下面介绍一些差距化的内容: 1:树型列表绑定: v ...
- HTML5事件——contextmenu 隐藏鼠标右键菜单
在window中单击右键或在Mac中Ctrl+单击时会触发contextmenu事件,通过取消其默认动作能够提供自己定义菜单. 首先先写一个自己的菜单: <style> ul, li { ...
- 阻止右键菜单(阻止默认事件)&&跟随鼠标移动(大图展示)&&自定义右键菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS简单实现自定义右键菜单
RT,一个简单的例子,仅仅讲述原理 <div id="menu" style="width: 0;height: 0;background: cadetblue;p ...
- AS3.0 自定义右键菜单类
AS3.0 自定义右键菜单类: /** * 自定义右键菜单类 * 自定义菜单项不得超过15个,每个标题必须至少包含一个可见字符. * 标题字符不能超过100个,并且开头的空白字符会被忽略. * 与任何 ...
- Extjs 4.2 panel 添加 click 事件及右键菜单
listeners: { render: function(c) { c.body.on('click', function() { //TODO 添加点击事件功能 }); c.body.on('co ...
- 【连载】Bootstrap开发漂亮的前端界面之自定义右键菜单
连载: 1<教你用Bootstrap开发漂亮的前端界面> 2.<Bootstrap开发漂亮的前端界面之实现原理> 网页中的自定义右键菜单越来越普遍,自定义右键菜单可以增强用户体 ...
- js进阶 12-18 jquery如何实现自定义右键菜单(把问题分细)
js进阶 12-18 jquery如何实现自定义右键菜单(把问题分细) 一.总结 一句话总结:用鼠标右键事件contextmenu,阻止系统默认事件,让做好的右键菜单显示出来,并且显示在我们出现的位 ...
随机推荐
- 2021年企业bi工具推荐
数据时代,商业智能工具对于企业了解复杂的大数据非常重要. 我们研究整理了国内外几十个商业智能BI工具,主要就其在功能.性能.价格.体验.安全等方面进行评测,希望帮助企业更好的进行BI产品选型. 一.t ...
- python的标识符&&关键字
和Java语言一样,python也有标识符和关键字.那么,你是否知道python的关键字呢?一起先从标识符了解python吧. 什么是标识符? 标识符,开发人员在开发过程中自定义的一些符号和名称. 标 ...
- 【C# 程序集】.net core 3.0中动态卸载|卸载程序集
原文:https://docs.microsoft.com/zh-cn/dotnet/core/dependency-loading/understanding-assemblyloadcontext ...
- 解构函数(Deconstruct)
元组的解构是C#内置支持的. var countrInfo = ("Malawi", "Lilongwe", io); (string name, string ...
- Hive常用函数大全-字符串函数
1.字符串长度函数:length(X)(返回字符串X的长度) select length('qwerty') from table --6 2.字符串反转函数:reverse(X)(返回字符串X反转的 ...
- C# 爬取图片
网络收集整理 爬取图片 引用AngleSharp NuGet 包 using AngleSharp; using System; using System.Collections.Generic; ...
- WPF-ListView单元格设置文字换行
第2-6行 1 <ListView Name="HumidifyEventLog" Style="{StaticResource ListViewStyle}&qu ...
- Hive数仓
分层设计 ODS(Operational Data Store):数据运营层 "面向主题的"数据运营层,也叫ODS层,是最接近数据源中数据的一层,数据源中的数据,经过抽取.洗净. ...
- VUE3 之 多个元素之间的过渡 - 这个系列的教程通俗易懂,适合新手
1. 概述 老话说的好:过去不等于未来,过去成功了不代表将来也会成功,过去失败了也不代表将来也会失败. 言归正传,今天我们聊聊多个元素之间的过渡. 2. 多个元素之间的过渡 2.1 两个元素交替显示 ...
- LabVIEW,控件快捷菜单,温度转换
目前正在自学LabVIEW,深感困难重重,我将偶尔发表一些自己的收获,自认为算是干货了, 搜到这篇随笔的朋友们或多或少遇到了些许困难,希望这能帮助到你们. 内容:练习使用LabVIEW中的控件快捷菜单 ...