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鼠标右键菜单代码的更多相关文章
- 禁止按键F5和禁止鼠标右键菜单 js代码
<script language="javascript"> //禁止按键F5 document.onkeydown = function(e){ e = window ...
- jQuery自定义Web页面鼠标右键菜单
jQuery自定义Web页面鼠标右键菜单 右键菜单是固定的,很多时候,我们需要自定义web页面自定义菜单,指定相应的功能. 自定义的原理是:jQuery封装了鼠标右键的点击事件(“contextmen ...
- Qt creator 创建鼠标右键菜单 (不新建类)
界面 步骤 打开你的界面文件并选中你要添加右键的控件,选择“CustomContextMenu” 右键选择“转到槽...” -> customContextMenuRequested 插入下面代 ...
- 如何在C#添加鼠标右键菜单
C#添加鼠标右键方法步骤: 1 选中要添加右键功能的Form或者控件,打开控件的设计页面. 2 从工具箱中找到ContextMenuStrip控件,将这个控件拖曳到Form或者控件的设计页面上.这时系 ...
- 将EmEditor加入到鼠标右键菜单
在清理系统的时候,无意中将EmEditor的鼠标右键功能给清理掉了,在EmEditor的配置中又没有找到如何加入到鼠标右键菜单的方法,只好使用导入注册表功能了,以下的代码,拷贝到记事本中,保存为EmE ...
- WinForm -- 为TextBox文本框添加鼠标右键菜单
WinForm -- 为TextBox文本框添加鼠标右键菜单 1. 新建一个WinForm项目,放置一个TextBox控件 2. 从工具箱拖进来一个ContextMenuStrip 3. 将TextB ...
- js自定义鼠标右键菜单
document.oncontextmenu = function(e) { return false; } document.onmousedown = function(e) { switch(e ...
- OpenLayers 3 之 加入地图鼠标右键菜单
加入右键菜单,首先我们要监听鼠标右键点击的操作,我们知道鼠标右键事件名是 contextmenu.当鼠标在 html 元素之上,点击鼠标右键,便会触发 contextmenu 事件,在 context ...
- ExtJS配置TabPanel的鼠标右键菜单(ContextMenu)功能
更新记录 2022年6月14日 发布. 2022年6月13日 初稿. TabPanel的鼠标右键菜单(ContextMenu)功能介绍 开源的TabPanel组件很少做到拖拽调整tab顺序功能的,支持 ...
随机推荐
- 关于前端框架BootStrap和JQueryUI（以及相应的优秀模板）
近期两个月因为须要升级公司产品的界面.所以不得不去学习了下原本并不熟悉的前端框架. 这里也是推荐两款BootStrap和JQueryUI. bootstrap使用起始非常easy,首先.须要得到所须要 ...
- Cocos2d-x 3.2Lua演示样例UserDefaultTest（用户默认配置）
Cocos2d-x 3.2演示样例UserDefaultTest(用户默认配置) 本篇博客介绍Cocos2d-x 3.2演示样例中的UserDefaulstTest,我们在开发中可能须要用到一些默认配 ...
- KMP算法具体解释
这几天学习kmp算法,解决字符串的匹配问题.開始的时候都是用到BF算法,(BF(Brute Force)算法是普通的模式匹配算法,BF算法的思想就是将目标串S的第一个字符与模式串T的第一个字符进行匹配 ...
- ZOJ ACM 1204 (JAVA)
毕业好几年了,对算法还是比較有兴趣,所以想又一次開始做ACM题.俺做题比較任意,一般先挑通过率高的题来做. 第1204题,详细描写叙述请參考,ZOJ ACM 1204 1)难度分析 这个题目,基本的难 ...
- 【maven教程】(1)---maven环境配置
maven环境配置 刚开始学习maven,现在项目需要用到maven,而且他确实很好用,也比较容易上手,我也是主要通过视频学习,在写博客的时候也会总结其它人所写 博客,从简到难,如果你也是初学者那接下 ...
- iOS开发添加pch文件
首先说一下pch的作用: 1.存放一些全局的宏(整个项目中都用得上的宏) 2.用来包含一些全部的头文件(整个项目中都用得上的头文件) 3.能自动打开或者关闭日志输出功能 如何在Xcode中添加pch文 ...
- Principle-初步认识（简介）
Principle官网 探究了一下 . 呃--作出了下边这玩意 做的好的是这样的,瞬间把自己给菜了,给大家看看,设计需要UI功夫啊 把这个用上你的界面就搞基了,图形在水平.垂直上的动态效果(*.*) ...
- 利用jquery实现电商网站常用特效之：五星评分
这篇文章主要为大家详细介绍了基于jquery实现五星好评,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 在电商网站,我们经常会用到五星评分的功能,现在用jQuery实现一个简单的demo: 1.引 ...
- 开发过程遇到的bug
1.transition和display的冲突: 解决方法:1)使用visibility:2)使用js的setTimeout使动画延迟:3)可以改变高度: 2.form表单提交和js中的提交冲突 解决 ...
- DedeCMS V5.7开启memcache缓存的方法配置说明
一.安装Memcache服务:1.1.linux下的Memcache安装:-------------------------1. 下载 memcache的linux版本,注意 memcached 用 ...