Html鼠标右键菜单代码
<!DOCTYPE html><html lang="en">
<head><meta charset="UTF-8"><title>html菜单显示界面</title><style type="text/css">*{margin: 0;padding: 0;}#btn{width: 60px;height: 30px;background-color: #01AAED;color: white;display:none;position: fixed;left: 0%;top: 0%;}#btn:hover{background-color: white;color: black;}</style>
</head>
<body><input type="button" value="删除" id="btn">
<div style="text-align: center"><img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" alt="" id="img">
</div>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script>$(function(){//此处是针对图片，如果这个元素上鼠标右键，将浏览器默认右键事件给拦截了$("#img").bind("contextmenu",function(e){return false;});//之前在网上看过很多代码，但是有一个bug，算不少bug，但是我要在这里说一下。鼠标右键点击事件鼠标松开之后 执行的 ，因为个人的操作习惯，当右键点起的时候 在按钮的0*0位置也执行了右键 ，所以说 上边屏蔽了为什么还显示默认浏览器菜单，那么 我们只需要把显示的元素鼠标右键给屏蔽掉就不会了，欢迎大家转载本代码，谢谢大家！ $("#btn").bind("contextmenu", function () {return false;})$("#img").mousedown(function (e) {if (e.which == 3){//获取鼠标的x轴var x = e.pageX;//获取鼠标的Y轴var y = e.pageY;//对我们设定的菜单元素位置移动到当前鼠标右键点击的位置，并且显示出来$("#btn").css({ 'top': y + 'px', 'left': x + 'px', 'display': 'block', 'position': 'absolute' });}})})
</script>
</body>
</html>
Html鼠标右键菜单代码相关推荐
- 网站禁用鼠标右键php代码,JavaScript_网页禁用右键菜单和鼠标拖动选择方法小结，一、禁止鼠标右键菜单：- phpStudy...
网页禁用右键菜单和鼠标拖动选择方法小结 一.禁止鼠标右键菜单: 有如下两种方法来禁止鼠标右键 1.在HTML元素的Body标签中加入Javascript事件句柄,代码如下: 说明:您也可以在网页指定的 ...
- 自定义html页面鼠标右键,javascript鼠标右键菜单自定义效果
本文实例讲解了javascript鼠标右键菜单的实现方法,分享给大家供大家参考,具体内容如下 效果图: 具体代码: #menu{ border:solid 1px gray; width:100px; ...
- WinForm -- 为TextBox文本框添加鼠标右键菜单
WinForm -- 为TextBox文本框添加鼠标右键菜单 1. 新建一个WinForm项目,放置一个TextBox控件 2. 从工具箱拖进来一个ContextMenuStrip 3. 将TextB ...
- openlayer右键菜单_使用OpenLayers3 添加地图鼠标右键菜单
添加右键菜单,首先我们要监听鼠标右键点击的操作,我们知道鼠标右键事件名是 contextmenu,当鼠标在 html 元素之上,点击鼠标右键,便会触发 contextmenu 事件,在 context ...
- Leaflet中使用Leaflet.contextmenu插件实现地图上添加鼠标右键菜单
场景 Leaflet快速入门与加载OSM显示地图: Leaflet快速入门与加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客 在上面的基础上,怎样使用Leaflet.co ...
- Silverlight 4.0添加鼠标右键菜单和Silverlight全屏模式的进入退出
说明:本文出处:http://www.cnblogs.com/chengxingliang/archive/2011/02/14/1954399.html#2627673(非常感谢) 在实际应用中,我 ...
- 将uglifyjs添加到鼠标右键菜单
之前几天根据YUICompressor和TBCompressor整合到鼠标右键菜单自己将uglifyjs也添加到了右键菜单,下面简单记录下过程.效果如下 uglifyjs添加到鼠标右键菜单 配置win ...
- 基于jQuery的鼠标右键菜单
对于自制的鼠标右键功能,我们应该考虑哪些因素呢? 一.涉及因素 1.阻止默认鼠标右键事件. 3.右键事件,使菜单出现. 2.考虑右键菜单出现的位置,是否超出窗口. 4.点击窗口任意位置,菜单消失. 二 ...
- 如何将VSCode添加到鼠标右键菜单
Windows上面安装Visual Studio Code编辑器,常常会因为安装的时候忘记勾选等原因,没有将"Open with Code(右键快捷方式)"添加到鼠标右键菜单里,使 ...
- Win系统集成一键显示隐藏系统文件到鼠标右键菜单.bat
前两天帮朋友电脑杀毒,发现他连隐藏文件都不知道是什么,更别提显示系统隐藏文件设置项了,正好之前有写过VBS的代码,改了一下安装到他的电脑鼠标右键菜单中了,这个还是非常实用的,目前朋友反映良好. 为什么 ...
最新文章
- df 和 du 命令详解
- Sublime Text提示Unable to download XXX. Please view the console for more details安装插件失败解决(转)
- Java属性中指定Json的属性名称（序列化和反序列化）
- .net source code download
- oracle 创建SDO_Geometry表
- java键盘监听keyadapter_JAVA 键盘监听当中，释放键盘并没有停止运动
- spark 源码分析之八--Spark RPC剖析之TransportContext和TransportClientFactory剖析
- Linux多线程工作笔记0005---Linux多线程基础_创建线程pthread_create_线程等待_线程终止
- 微信小程序富文本组件mp-html
- android实战技巧,实战技巧：Android异步指南
- C#【必备技能篇】注册dll+批量注册dll
- Unity3d 局域网小游戏DEMO学习
- Windows许可证过期（‘slmgr.vbs‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件）
- 一天一阔阔儿ZYNQ的linux移植完整版(Linux环境搭建以及内核编译)
- 计算机msvcr110.dll,msvcr110.dll
- bzoj2115 线性基 异或
- 忘记手机密码怎么用计算机解开,手机忘记密码怎么办？教你三种方法帮你搞定！...
- Vue中引入字体并解决字体文件过大问题
- Ristretto 简介： 一个高性能GO缓存
- Visualization领域研究以及会议分类