<!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. 『王霸之路』从0.1到2.0一文看尽TensorFlow奋斗史

    ​ 0 序篇 2015年11月,Google正式发布了Tensorflow的白皮书并开源TensorFlow 0.1 版本. 2017年02月,Tensorflow正式发布了1.0.0版本,同时也标志 ...

  2. CSS3 box-shadow阴影

    box-shadow: color x-offset v-offset blur spred color: 阴影的颜色 x-offset: 阴影水平距离; 0: 左右阴影平分:正值:阴影在对象的右侧: ...

  3. .Net Core自动化部署系列（一）：Jenkins + GitLab

    项目进行微服化改造后系统发布就变得愈为重要,因为持续集成导致部署变得越来越频繁,人工部署带来的一些问题日渐凸显,大家可能都有被系统部署线问题困扰过的经历. 本篇我们将会使用Jenkins+Gitlab ...

  4. 浅析十大常见排序（含C++代码）

    首先声明一下,本文只对十种排序算法做简单总结,并参照一些资料给出自己的代码实现,并没有对某种算法理论讲解,更详细的 了解可以参考以下资料: 1.<data structure and algor ...

  5. JS中的prototype、__proto__与constructor

    1.前言 作为一名前端工程师,必须搞懂JS中的prototype.__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关 ...

  6. CSS隐藏元素 display、visibility、opacity的区别

    关于使指定元素无法在视野内看到,有3个方法 display: none; opacity: 0; visibility: hidden; 1.display: none; 该方法会改变页面布局. 元素 ...

  7. MOV与LEA

    MOV 格式:MOV dest, src 作用:赋值,且不改变标记位的值 特点:可以从寄存器到寄存器.从立即数到寄存器.从存储单元到寄存器.从立即数到储存单元.从寄存器到存储单元.从寄存器或存储单元到 ...

  8. 6.InfluxDB-InfluxQL基础语法教程--GROUP BY子句

    本文翻译自官网,官网地址:(https://docs.influxdata.com/influxdb/v1.7/query_language/data_exploration/) GROUP BY子句 ...

  9. VUE--插值的操作

    一.vue常见的指令 v-once:保留第一次渲染结果 v-html :把html代码解析,只显示内容 v-pre :原样输出 v-cloak :解决文本闪烁问题 v-text :显示文本 二.v-b ...

  10. Java中获取刚插入数据库中的数据Id（主键，自动增长）

    public int insert(String cName, String ebrand, String cGender) { String sql = "insert into Clot ...