<!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;
});
  1. //之前在网上看过很多代码,但是有一个bug,算不少bug,但是我要在这里说一下。鼠标右键点击事件鼠标松开之后 执行的  ,因为个人的操作习惯,当右键点起的时候  在
  2. 按钮的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鼠标右键菜单代码的更多相关文章

  1. 禁止按键F5和禁止鼠标右键菜单 js代码

    <script language="javascript"> //禁止按键F5 document.onkeydown = function(e){ e = window ...

  2. jQuery自定义Web页面鼠标右键菜单

    jQuery自定义Web页面鼠标右键菜单 右键菜单是固定的,很多时候,我们需要自定义web页面自定义菜单,指定相应的功能. 自定义的原理是:jQuery封装了鼠标右键的点击事件(“contextmen ...

  3. Qt creator 创建鼠标右键菜单 (不新建类)

    界面 步骤 打开你的界面文件并选中你要添加右键的控件,选择“CustomContextMenu” 右键选择“转到槽...” -> customContextMenuRequested 插入下面代 ...

  4. 如何在C#添加鼠标右键菜单

    C#添加鼠标右键方法步骤: 1 选中要添加右键功能的Form或者控件,打开控件的设计页面. 2 从工具箱中找到ContextMenuStrip控件,将这个控件拖曳到Form或者控件的设计页面上.这时系 ...

  5. 将EmEditor加入到鼠标右键菜单

    在清理系统的时候,无意中将EmEditor的鼠标右键功能给清理掉了,在EmEditor的配置中又没有找到如何加入到鼠标右键菜单的方法,只好使用导入注册表功能了,以下的代码,拷贝到记事本中,保存为EmE ...

  6. WinForm -- 为TextBox文本框添加鼠标右键菜单

    WinForm -- 为TextBox文本框添加鼠标右键菜单 1. 新建一个WinForm项目,放置一个TextBox控件 2. 从工具箱拖进来一个ContextMenuStrip 3. 将TextB ...

  7. js自定义鼠标右键菜单

    document.oncontextmenu = function(e) { return false; } document.onmousedown = function(e) { switch(e ...

  8. OpenLayers 3 之 加入地图鼠标右键菜单

    加入右键菜单,首先我们要监听鼠标右键点击的操作,我们知道鼠标右键事件名是 contextmenu.当鼠标在 html 元素之上,点击鼠标右键,便会触发 contextmenu 事件,在 context ...

  9. ExtJS配置TabPanel的鼠标右键菜单(ContextMenu)功能

    更新记录 2022年6月14日 发布. 2022年6月13日 初稿. TabPanel的鼠标右键菜单(ContextMenu)功能介绍 开源的TabPanel组件很少做到拖拽调整tab顺序功能的,支持 ...

随机推荐

  1. 行编辑距离Edit Distance——动态规划

    题目描写叙述: 给定一个源串和目标串.可以对源串进行例如以下操作:  1. 在给定位置上插入一个字符  2. 替换随意字符  3. 删除随意字符 写一个程序.返回最小操作数,使得对源串进行这些操作后等 ...

  2. iOS 力学动画生成器UIKit Dynamics 之碰撞效果解说

    UIKit Dynamic是iOS7 新增的一组类和方法.可赋予UIView逼真的行为和特征,不须要写动画效果那些繁琐的代码,让开发者可以轻松地改善应用的用户体验.一共同拥有6个可用于定制UIDyna ...

  3. Janus 二元神漏洞测试

    同步发表于:http://blog.hacktons.cn/2017/12/25/janus-demo/ 背景 12月9号,Andorid对外曝光了一个名为Janus的重量级系统漏洞CVE-2017- ...

  4. Oracle自动备份数据

    一. Oracle自动备份单表一个月数据 方式一:三步处理(建批处理文件,写sql文件,设置任务计划) 1. 第一步:建立一个批处理文件 @echo off Set OrclSid=orcl Set ...

  5. url_for()中的坑,url_for操作对象是函数,而不是route里的路径

    url_for操作对象是函数,而不是route里的路径. url_for操作对象是函数,而不是route里的路径. url_for操作对象是函数,而不是route里的路径.

  6. Mesos初步尝试

    记得几年前,用.net做分布式批处理的时候环境搭建很麻烦,虽然参数的分片算法.配置都搞定了,但是.net虚拟机的环境建立是个头疼的事: 节点要自己手工建 环境变量没法从前往后传递 批处理程序改动后的分 ...

  7. 合并查询结果集UNION(去重), UNION ALL(不去重),INTERSECT(交集),MINUS(差集,第一个结果集减去第二个结果集,第一个结果集中不在第二个结果集中的记录行),[NOT] EXIST

    MINUS配合[NOT] EXIST使用可以查询出包含符合某个条件的多记录的其他记录, 举例: 顾客A买了商品2.4.6 顾客B买了商品1.2.4 顾客C买了商品4.6 顾客D买了商品1.2.4.6 ...

  8. OC学习15——文件I/O体系

    OC提供了丰富的I/O相关API,如果只是管理文件和目录,程序可以使用NSFileManager进行管理,包括创建.删除.移动和复制文件等:如果程序需要读取文件内容,则可通过NSFileHandle进 ...

  9. 树形dp系列

    1.火车站开饭店 最大独立集裸题 #include<iostream> #include<cstdio> #include<cstdlib> #include< ...

  10. 树链剖分X2

    1.ZJOI树的统计 板子题 因为初始化没打改了几个小时 改到双腿软着出的机房(身体素质感人 #include<iostream> #include<cstdio> #incl ...