<!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>鼠标右键事件</title>

     <!-- 引入jq -->

     <script type="text/javascript" src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>

     <style type="text/css">

         .view{

             width: 500px;

             height: 500px;

             margin: 0px auto;

             background-color: #999;

         }

         #r_click{

             position: fixed;width: 120px;height: 60px;border: solid 1px #ccc;background-color: #fff;

             cursor: pointer;

         }

         #r_click>div:nth-child(1){

             border-bottom: solid 1px #ccc

         }

         #r_click>div{

             height: 30px;

             line-height: 30px;

             text-align: center;

             font-size: 14px;

         }

         #r_click>div:hover{

             background-color: #ccc;

         }

     </style>

 </head>

 <body>

 <div class="view" id="view">

 </div>

 <script>

     window.onload =function () {

         var el = document.getElementById("view");

         var html = '<div id="r_click">' +

             '<div>右点击1</div>' +

             '<div>右点击2</div>' +

             '</div>';

         el.oncontextmenu = function(e) {

             //左键--button属性=1，右键button属性=2

             r_clickCancel();

             if(e.button == 2) {

                 e.preventDefault();

                 var _x = e.clientX,

                     _y = e.clientY;

                 var layer_obj=$(html).css({

                     'display':"block",

                     'left':_x + "px",

                     'top':_y + "px"

                 })

                 $('body').append(layer_obj);

             }

         }

     }

     //绑定全局取消右击弹层事件

     $(function () {

         $('body').click(function () {

             r_clickCancel()

         })

     })

     /**

      * 隐藏右击弹层

      * @returns {boolean}

      */

      function r_clickCancel(){

         var layer_click=$('#r_click')

         if(layer_click.length>=1){

             layer_click.remove();

         }

         return false;

     }

 </script>

 </body>

 </html>

网页开发利用jq自定义鼠标右击事件的更多相关文章

  1. JS自定义鼠标右击菜单

    自定义鼠标右击菜单要素: 禁止页面默认右击事件 设置右击菜单的样式以及菜单出现的位置(通过捕获鼠标点击位置来确定菜单的位置) 鼠标在指定控件(区域)上右击时显示菜单(默认菜单隐藏,点击鼠标右键时显示) ...

  2. 网页里如何使用js屏蔽鼠标右击事件

    图片.png 在后台管理系统里面,遇到了这样的一个问题,右击ztree菜单,弹出修改界面,但是,现在确实这样的,右击默认弹出功能提示的框框,看上去似乎很影响自己想要的功能,只能禁用了,那么,网页里如何 ...

  3. C#开发---利用特性自定义数据导出到Excel

    网上C#导出Excel的方法有很多.但用来用去感觉不够自动化.于是花了点时间,利用特性做了个比较通用的导出方法.只需要根据实体类,自动导出想要的数据  1.在NuGet上安装Aspose.Cells或 ...

  4. cocos2d-x C++ (利用定时器自定义屏幕双击事件函数)

    //GameScene.h #include "cocos2d.h" USING_NS_CC; class GameScene : public cocos2d::Layer { ...

  5. jq自定义鼠标右键菜单

    效果: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  6. vue 鼠标右击事件

    使用@contextmenu.prevent即可 参考:https://www.cnblogs.com/sxz2008/p/6953082.html

  7. js为鼠标添加右击事件

    <script language="javascript">  /*document.oncontextmenu=Youji;*/  //为当前文档添加鼠标右击事件,防 ...

  8. 网页里如何使用js禁用F12事件

    接上一篇,突然想起来,类似于网页里如何使用js禁用鼠标右击事件,还有禁用F12事件也可以禁用一下,总所周知,对于Web开发人员来说,常常要进行界面的调试.使用F12调试工具能够很方便地进行调试,查看h ...

  9. ztree实现根节点右击事件，显示添加删除

    需求,右击树节点,出现编辑和删除的提示框 1:在setting 配置里面,给callback设置,右击事件onRightClick: 2:写一个函数onRightClick function onRi ...

随机推荐

  1. JS 时间格式 相互转化

    1. 时间字符串格式 var dateString1 = '2016-06-15 10:22:00'; var dateString2 = '2016/06/15 10:22:00'; var dat ...

  2. 前端深入之css篇|link和@import到底有什么区别？

    写在前面 在真正的前端开发中,我们很少去写行内样式和内嵌样式,通常都是去引用外部样式. 而在我们学习之初的外部样式表都是用link引入的,但是当后来我们学习的逐渐深入,发现@import也可以引入样式 ...

  3. Python3 学习笔记之 变量/字符串/if/while/逻辑运算符/模块引用

    变量/if/while/逻辑运算符/模块引用: 变量: 使用变量前必须先赋值. 大小写区分. Python创建字符串,在字符串两边可以加上单引号或者双引号. 打印单引号或双引号,使用转移\ 使用\进行 ...

  4. MongoDB 学习笔记之 Nested doc/DBRef (Spark)

    Nested doc/DBRef (Spark) 实现: 运行结果:

  5. 写了那么多年 Java 代码，终于 debug 到 JVM 了

    继上篇文章 原创 | 全网最新最简单的 openjdk13 代码编译 之后,我们有了自己编译后的 jdk 和 hotspot,如下图所示.接下来就来干一番事情. 搭建调试环境 1.下载 CLion 软 ...

  6. Chirpy Zippy工具使用心得

    今天在网上看到MVC开发人员必备的工具中有一个工具叫Chirpy Zippy,可以把项目中的js文件自动压缩成min.js文件,于是就试了下这款工具.上到官网:http://chirpy.codepl ...

  7. c语言作业04

    这个作业属于哪个课程 C语言程序设计Ⅱ 这个作业要求在哪里 (作业要求)[https://edu.cnblogs.com/campus/zswxy/SE2019-1/homework/9773] 我在 ...

  8. 从零学习基于Python的RobotFramework自动化

    从零学习基于Python的RobotFramework自动化 一.        Python基础 1)      版本差异 版本 编码 语法 其他 2.X ASCII try: raise Type ...

  9. cocos2dx 3.2 内存管理

    一.引用计数(cocos2d-x3.2的Node类中用到) 概念:记录当前对象被引用的次数.当次数为0时释放. 1 . retain  与 release 每调用一次retain()使计数+1 每调用 ...

  10. 比较两个文件的异同Python3 标准库difflib 实现

    比较两个文件的异同Python3 标准库difflib 实现 对于要比较两个文件特别是配置文件的差异,这种需求很常见,如果用眼睛看,真是眼睛疼. 可以使用linux命令行工具diff a_file b ...