<!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. Java中用Apache POI生成excel和word文档

    概述: 近期在做项目的过程中遇到了excel的数据导出和word的图文表报告的导出功能.最后决定用Apache POI来完毕该项功能.本文就项目实现过程中的一些思路与代码与大家共享.同一时候.也作为自 ...

  2. php之str_replace具体解释

    str_replace (PHP 4, PHP 5) str_replace - Replace all occurrences of the search string with the repla ...

  3. Scala环境搭建之eclipse

    由于Spark的缘故.我们来看看另外一门语言--Scala,为什么要看这门语言呢?唉~事实上你不看也没关系,仅仅只是spark的内核就是用Scala写的.spark也提供其它语言的编程模型....看自 ...

  4. 最重要的 Java EE 最佳实践

    參考:IBM WebSphere 开发人员技术期刊: 最重要的 Java EE 最佳实践 IBM WebSphere 开发人员技术期刊: 最重要的 Java EE 最佳实践 2004 年 IBM® W ...

  5. 基于Metronic的Bootstrap开发框架经验总结（17）-- 使用 summernote插件实现HTML文档的编辑和图片插入操作

    在很多场合,我们需要在线编辑HTML内容,然后在页面上或者其他终端上(如小程序.APP应用等)显示,编辑HTML内容的插件有很多,本篇介绍基于Bootstrap的 summernote插件实现HTML ...

  6. Python的类(class)

    python 3.6 官方文档  https://docs.python.org/3.6/index.html python 3.6 的类 https://docs.python.org/3.6/tu ...

  7. 《JavaScript语言精粹》【PDF】下载

    <JavaScript语言精粹>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230382204 内容简介 javascript曾是&q ...

  8. 5.python函数

    一.递归函数 如果一个函数在内部调用自身,那么这个函数就叫做递归函数. 1. 必须有一个明确的结束条件: 2. 每次进入更深一层递归时,问题规模相比上次递归都应有所减少: 3.递归效率不高,递归层次过 ...

  9. SpringBoot学习笔记

    SpringBoot个人感觉比SpringMVC还要好用的一个框架,很多注解配置可以非常灵活的在代码中运用起来: springBoot学习笔记: .一.aop: 新建一个类HttpAspect,类上添 ...

  10. IP地址简介

    IP地址 IP地址,Internet Protocol Address,网络协议地址: IP地址与网络接口绑定,并不是指向一台主机,一个主机可能有多个IP地址,如果其连接多个网络,有多个网络接口: I ...