web页面点击右键显示按钮

首先声明一个对象,然后把声明的对象,赋值一个function,在对象的function当中再return一个function,在返回的这个function中第一步就是要把按钮的class先移除,不然到后面取消右键显示按钮的时候会失效,按钮依然会显示,不会隐藏,第二步就是命名一个拼接上按钮的html代码,因为html代码中有a标签,a标签有href的属性,需要把href属性设置成javascript:;,可以使用jquery中的find方法找到a标签使用attr设置href属性,也可以直接在拼接的a标签里直接设置href属性,最后使用end和appendTo破坏和追加到body上,return拼接设置好的html代码

var kyoPopupMenu = {};
kyoPopupMenu = (function () {
    return {
        sys: function (obj) {
            $('.popup_menu').remove();
            popupMenuApp = $('<div class="popup_menu app-menu"><ul><li οnclick="AddRow()"><a menu="menu1"><i class="zi zi_plus"></i> 增明细</a>' +
                             '</li><li οnclick="delRow()"><a menu="menu2"><i class="zi zi_trashalt"></i> 删明细</a></li></ul></div>')
                .find('a').attr('href', 'javascript:;')
                .end().appendTo('body');
            return popupMenuApp;
        }
    }
})();

取消右键,把按钮的隐藏起来,获取到html代码块,使用jquery的on方法给html绑定contextmenu,回调函数,return false,绑定click事件,在click事件的function里把按钮给隐藏起来

//取消右键
$('html').on('contextmenu', function () { return false; }).click(function () {
    $('.popup_menu').hide();
});

点击右键把按钮显示出来,首先获取一个class,只有在有这个class的元素内点击右键才使用jquery的on方法给获取到的这个class元素绑定contextmenu,回调函数里给上一个形参,申明一个变量赋值为拼接好的html代码的方法,使用坐标轴的方法,计算点击右键的位置,在哪里点击的右键就按钮就显示在什么位置,l赋值为:如果(获取到document元素的宽度减去游览器页面的水平坐标)<拼接html代码的function的宽度就赋值游览器页面的水平坐标减去拼接html代码的function的宽度,否者就直接赋值为游览器页面的水平坐标,t赋值为:如果(获取到document元素的高度减去游览器页面的垂直坐标)<拼接html代码的function的高度就赋值游览器页面的垂直坐标减去拼接html代码的function的高度,否者就直接赋值为游览器页面的垂直坐标。l和t的值是使用三目运算符计算的到的。申明的变量的css显示在左边l和邮编t计算得到的位置

//桌面点击右击
$('.Table').on('contextmenu', function (e) {
    var popupmenu = kyoPopupMenu.sys();
    l = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX;
    t = ($(document).height() - e.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : e.clientY;
    popupmenu.css({ left: l, top: t }).show();
    return false;
});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/580270.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

重生奇迹mu装备掉落大全

1、骷髅兵&#xff1a; [一般宝]毒戒指(3%HP)石巨人召唤石玛雅雷之项链(1%)。 2、独眼巨人&#xff1a;4冰之戒指(2%)3雷之项链(2%)3毒之戒指天使3毒戒(3%回复)灵魂祝福石巨人石玛雅钻云枪石。 3、幽灵&#xff1a;3雷链(hp3%)守护天使小恶魔&#xff0c;灵魂宝石祝福4冰戒回3…

AI赋能分层模式,解构未来,智领风潮

​&#x1f308; 个人主页&#xff1a;danci_ &#x1f525; 系列专栏&#xff1a;《设计模式》 &#x1f4aa;&#x1f3fb; 制定明确可量化的目标&#xff0c;坚持默默的做事。 &#x1f680; 转载自热榜文章&#x1f525;&#xff1a;探索设计模式的魅力&#xff1a;AI赋能分…

【探索Java编程:从入门到入狱】Day3

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【Java、PHP】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收…

Redis分布式锁 - 基于Jedis和LUA的分布式锁

先基于单机模式&#xff0c;基于Jedis手工造轮子实现自己的分布式锁。 首先看两个命令&#xff1a; Redis 分布式锁机制&#xff0c;主要借助 setnx 和 expire 两个命令完成。 setnx命令: setnx 是 set if not exists 的简写。将 key 的值设为 value &#xff0c;当且仅当…

跨设备自动化协同提效新利器!边缘自动化流程编排工具

痛点剖析 随着企业生产环境的日益复杂化&#xff0c;不同生产设备间的协调性问题尤为凸显。 1、不同设备往往基于各自的技术标准、通信协议和操作系统设计&#xff0c;这使得它们之间的数据交换和指令传递存在显著的障碍。 2、技术上的不兼容性导致设备间难以实现无缝对接和…

Matplotlib是什么?

一、Matplotlib是什么&#xff1f; Matplotlib是一个Python语言的2D绘图库&#xff0c;它非常广泛地用于数据的可视化。以下是一些主要特点&#xff1a; 多功能性&#xff1a;它允许用户创建各种静态、动态或交互式的图表&#xff0c;如线图、散点图、直方图等。跨平台性&…

基于MSP430F249的电子钟仿真(源码+仿真)

目录 1、前言 2、仿真 3、程序 资料下载地址&#xff1a;基于MSP430F249的电子钟仿真(源码仿真&#xff09; 1、前言 基于MSP430F249的电子钟仿真&#xff0c;数码管显示时分秒&#xff0c;并可以通过按键调节时间。 2、仿真 3、程序 #include <MSP430x24x.h> #def…

Spring Boot项目中的ASCII艺术字

佛祖保佑&#xff1a; ${spring-boot.formatted-version} ———————————————————————————————————————————————————————————————————— // _ooOoo_ …

tomcat系统架构及运用

文章目录 下面是Tomcat架构的详细解析&#xff1a;1. **Server&#xff08;服务器&#xff09;**2. **Service&#xff08;服务&#xff09;**3. **Container&#xff08;容器&#xff09;** - 分层结构4. **Connectors&#xff08;连接器&#xff09;**5. **类加载器&#xff…

数据集笔记:处理北大POI 数据:保留北京POI

数据来源&#xff1a;Map POI (Point of Interest) data - Official data of the contest (pku.edu.cn) windows 下载方法&#xff1a;数据集笔记&#xff1a;windows系统下载北大开放数据研究平台的POI数据-CSDN博客 1 读取数据 1.1 列出所有的文件 dir1D:/data/PKU POI/2…

如何管理约束

本文主要介绍如何管理约束&#xff0c;包括决定何时发生约束检查&#xff0c;如何删除约束&#xff0c;删除和更新父行&#xff0c;插入和更新子行。 1. 约束事务模式 约束事务模式决定何时发生引用违例检查。 对于具有日志记录的数据库 — 即时约束&#xff08;Immediate con…

【笔试强训】Day4 --- Fibonacci数列 + 单词搜索 + 杨辉三角

文章目录 1. Fibonacci数列2. 单词搜索3. 杨辉三角 1. Fibonacci数列 【链接】&#xff1a;Fibonacci数列 解题思路&#xff1a;简单模拟题&#xff0c;要最少的步数就是找离N最近的Fibonacci数&#xff0c;即可能情况只有比他小的最大的那个Fibonacci数以及比他大的最小的那…

【VUE】Vue中实现树状表格结构编辑与版本对比的详细技术实现

Vue中实现树状表格结构编辑与版本对比的详细技术实现 在Vue中&#xff0c;创建一个可编辑的树状表格并实施版本对比功能是一种需求较为常见的场景。在本教程中&#xff0c;我们将使用Vue结合Element UI的el-table组件&#xff0c;来构建一个树状表格&#xff0c;其中包含添加、…

ICCV 2021 | FcaNet: Frequency Channel Attention Networks 中的频率分析

ICCV 2021 | FcaNet: Frequency Channel Attention Networks 中的频率分析 论文&#xff1a;https://arxiv.org/abs/2012.11879代码&#xff1a;https://github.com/cfzd/FcaNet 文章是围绕 2D 的 DCT 进行展开的&#xff0c;本文针对具体的计算逻辑进行梳理和解析。 f ( u ,…

【MySQL精炼宝库】数据库的约束 | 表的设计 | 聚合查询 | 联合查询

目录 一、数据库约束 1.1 约束类型&#xff1a; 1.2 案例演示&#xff1a; 二、表的设计 2.1 一对一: 2.2 一对多: 2.3 多对多: 2.4 内容小结&#xff1a; 三、新增 四、查询 4.1 聚合查询&#xff1a; 4.1.1 聚合函数&#xff1a; 4.1.2 GROUP BY子句&#xff1a…

linux使用docker 安装mysql redis

linux安装docker https://hub-stage.docker.com/ 前往这里搜索容器来部署。每个容器都有独立的运行环境。 具体安装教程 https://docs.docker.com/engine/install/centos/#install-using-the-repository 检查是否安装成功&#xff1a; sudo docker --version 配置国内镜像加速…

人脸识别概念解析

目录 1. 概述 2. 人脸检测 3. 人脸跟踪 4. 质量评价 5. 活体检测 6. 特征提取 7. 人脸验证 8. 人脸辨识 1. 概述 人脸识别在我们的生活中随处可见&#xff0c;例如在大楼门禁系统中&#xff0c;它取代了传统的门禁卡或密码&#xff0c;提高了进出的便捷性和安全性。在商…

Adfind的使用

Adfind是一个使用C语言写的活动目录查询工具&#xff0c;它允许用户轻松地搜索各种活动目录信息。它不需要安装&#xff0c;因为它是基于命令行的。它提供了许多选项&#xff0c;可以细化搜索并返回相关细节。下面讲解Adfind的参数以及其使用。 参数 执行如下命令即可查看Adf…

ruoyi-nbcio-plus基于vue3的flowable为了适配文件上传改造VForm3的代码记录

更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码&#xff1a; https://gitee.com/nbacheng/ruoyi-nbcio 演示地址&#xff1a;RuoYi-Nbcio后台管理系统 http://218.75.87.38:9666/ 更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码&#xff1a; h…

Flutter笔记:DefaultTextStyle和DefaultTextHeightBehavior解读

Flutter笔记 DefaultTextStyle和DefaultTextHeightBehavior解读 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite&#xff1a;http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this article:htt…
最新文章