网页开发利用jq自定义鼠标右击事件
<!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自定义鼠标右击事件的更多相关文章
- JS自定义鼠标右击菜单
自定义鼠标右击菜单要素: 禁止页面默认右击事件 设置右击菜单的样式以及菜单出现的位置(通过捕获鼠标点击位置来确定菜单的位置) 鼠标在指定控件(区域)上右击时显示菜单(默认菜单隐藏,点击鼠标右键时显示) ...
- 网页里如何使用js屏蔽鼠标右击事件
图片.png 在后台管理系统里面,遇到了这样的一个问题,右击ztree菜单,弹出修改界面,但是,现在确实这样的,右击默认弹出功能提示的框框,看上去似乎很影响自己想要的功能,只能禁用了,那么,网页里如何 ...
- C#开发---利用特性自定义数据导出到Excel
网上C#导出Excel的方法有很多.但用来用去感觉不够自动化.于是花了点时间,利用特性做了个比较通用的导出方法.只需要根据实体类,自动导出想要的数据 1.在NuGet上安装Aspose.Cells或 ...
- cocos2d-x C++ (利用定时器自定义屏幕双击事件函数)
//GameScene.h #include "cocos2d.h" USING_NS_CC; class GameScene : public cocos2d::Layer { ...
- jq自定义鼠标右键菜单
效果: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...
- vue 鼠标右击事件
使用@contextmenu.prevent即可 参考:https://www.cnblogs.com/sxz2008/p/6953082.html
- js为鼠标添加右击事件
<script language="javascript"> /*document.oncontextmenu=Youji;*/ //为当前文档添加鼠标右击事件,防 ...
- 网页里如何使用js禁用F12事件
接上一篇,突然想起来,类似于网页里如何使用js禁用鼠标右击事件,还有禁用F12事件也可以禁用一下,总所周知,对于Web开发人员来说,常常要进行界面的调试.使用F12调试工具能够很方便地进行调试,查看h ...
- ztree实现根节点右击事件，显示添加删除
需求,右击树节点,出现编辑和删除的提示框 1:在setting 配置里面,给callback设置,右击事件onRightClick: 2:写一个函数onRightClick function onRi ...
随机推荐
- Logrotate配置
目录 Logrotate配置 参考 Logrotate Description Logrotate Configuration Logrotate配置
- 向net core 3.0进击——April.WebApi从2.2爬到3.0
目录 前言 升级之路 测试 小结 前言 在之前对Swagger的变化做了调整后,就开始想着要不把之前的工程升级得了,这样就还是个demo工程,来做各种测试(当然还是因为懒),这就有了今天这个比较折腾的 ...
- MySQL 数据库删除表中重复数据
采集数据的时候,由于先期对页面结构的分析不完善,导致采漏了一部分数据.完善代码之后重新运行 Scrapy,又采集了一些重复的数据,搜了下删除重复数据的方法. N.B. 删除数据表的重复数据时,请先备份 ...
- 自己写的Weblogic的poc
""" 暂时只试用于Linux,先试试用一下反弹shell CVE-2017-10271的EXp """ import requests i ...
- hihocoder 数论二·Eular质数筛法
数论二·Eular质数筛法 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Ho:小Hi,上次我学会了如何检测一个数是否是质数.于是我又有了一个新的问题,我如何去快速得 ...
- Unreal Engine 4 系列教程 Part 5：制作简单游戏
.katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...
- django模型中有外键关系的表删除相关设置
0904自我总结 django模型中有外键关系的表删除相关设置 一.一对一 例如有Author.AuthorDetail两表 author = models.OneToOneField(to='Aut ...
- 公共DNS性能大比拼
今天中午,访问Gitee突然访问不进去,然后收到红薯通知:阿里云停止了 Gitee.com 的域名解析. 码云官方也随后给出解决办法 没有任何提示,没有任何提前通知,阿里云停止了 Gite ...
- 我家很管事的猫——mycat初步部署实践与问题排查
mycat,阿里出品的mysql中间件,提供读写分离和分库分表方案.项目中主要使用的是其读写分离功能. [如何部署?] 本文只采用并测试了双主从模式,配置看这一篇足矣: https://www.cnb ...
- PHP代码审计基础-中级篇
初级篇更多是对那些已有的版本漏洞分析,存在安全问题的函数进行讲解,中级篇更多是针对用户输入对漏洞进行利用 中级篇更多是考虑由用户输入导致的安全问题. 预备工具首先要有php本地环境可以调试代码 总结就 ...