<!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. 浅析java垃圾回收机制

    什么是java程序中的垃圾?什么这些垃圾又是怎样被回收的?为什么会被回收?不进行回收又会怎样?这些问题都是我们要在这篇博客中要解决的问题! 大家都知道,在c语言中,作为程序员,必须得考虑到去怎样回收已 ...

  2. 如何制作一个Nginx镜像

    1,从这里你将学到编写Dockerfile的4个重要指令RUN,EXPOSE,ADD,ENTRYPOINT2,在Dockerfile中编写拷贝文件至容器的方法3, 安装一个nginx server,并 ...

  3. TensorFlow基本计算单元与基本操作

    在学习深度学习等知识之前,首先得了解著名的框架TensorFlow里面的一些基础知识,下面首先看一下这个框架的一些基本用法. import tensorflow as tf a = 3 # Pytho ...

  4. Video/audio标签的一些基础使用心得

    常用方法 .play():用于音频视频的播放 .pause():用于音频视频的暂停 常用属性 <audio src="Batmobile Battle Mode Reveal Musi ...

  5. 鱼和熊掌可兼得？一文看懂又拍云 SCDN

    转眼已是 9102 年,参与工作多年的二狗子凭借他聪明的脑瓜和孜孜不倦的钻研精神,成为了某中型企业的资深网站管理员.不同于一般的"网管",二狗子自然是业内最优秀的那一类. 但是,最 ...

  6. Linux内存描述之内存节点node–Linux内存管理(二)

    日期 内核版本 架构 作者 GitHub CSDN 2016-06-14 Linux-4.7 X86 & arm gatieme LinuxDeviceDrivers Linux内存管理 #1 ...

  7. 【TencentOS tiny】深度源码分析（6）——互斥锁

    互斥锁 互斥锁又称互斥互斥锁,是一种特殊的信号量,它和信号量不同的是,它具有互斥锁所有权.递归访问以及优先级继承等特性,在操作系统中常用于对临界资源的独占式处理.在任意时刻互斥锁的状态只有两种,开锁或 ...

  8. BZOJ 2535: [Noi2010]Plane 航空管制2

    Description 世博期间,上海的航空客运量大大超过了平时,随之而来的航空管制也频频发生.最近,小X就因为航空管制,连续两次在机场被延误超过了两小时.对此,小X表示很不满意. 在这次来烟台的路上 ...

  9. NAT模式实现虚拟机共享主机网络

    上一节我们在虚拟机上搭建了linux系统,并利用桥接模式访问互联网,这一节,我们来配置一下通过NAT模式访问互联网.说到这里有些小伙伴可能要问了,NAT模式和桥接模式有什么区别呢? 桥接模式: 虚拟机 ...

  10. Io流的概述

    Io流的概述IO: I输入(Input),O 输出(Output)1.什么是IO流? 数据流,IO是严格的“水流模型” 所以IO流是用来读写数据,或者传输数据. 注意:File只能操作文件对象本身,而 ...