网页开发利用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 ...
随机推荐
- LINUX系统学习以及初学者系统下载
Linux系统常用命令大全 来源:服务器之家 [博客中所有文章如有不对的地方希望看官们指出,有问题也可以提出来相互交流,相互学习,感谢大家!] 初学者建议安装:sentOS Ubuntu系统下载连接h ...
- Python采集VIP收费QQ音乐，一起来听周董最新的《说好不哭》，省3块不香吗？
环境: windows python3.6.5 模块: requests selenium json re urllib 环境与模块介绍完毕后,就可以来实行我们的操作了. 第1步: 通过一个解析网站: ...
- P3515 [POI2011]Lightning Conductor
首先进行一步转化 $a_j \leq a_i + q - sqrt(abs(i - j))$ $a_i + q \geq a_j + sqrt(abs(i-j))$ 即 $q = max (a_j + ...
- 无广告版本Flash player 一枚，需要的拿走~
无广告版本flashplayer,国内flashplayer已经被植入了广告,安装后不断的弹出广告使用体验很差,最开始还以为是电脑被恶意植入捆绑插件, 检查半天发现竟然是浏览器的flash playe ...
- 一步一步带你在VS 2017中配置OpenGL
在VS2017环境中配置OpenGL,我们分三步:配置GLFW.配置GLAD.导出项目模板. 配置GLFW 1.首先下载GLFW,点击这里,进入Github下载. 或者 点击这里从百度云下载,提取码为 ...
- Spring MVC学习 （ RESTful）
是一套规则,不同的系统之间(Vue java Python C# PHP)具体四种不同类型的HTTP 请求分别表示四种基本操作(CRUD) GET :查询(R) POST:添加(C) PUT:修改( ...
- Scala 学习笔记之函数(1)
class Student { val mySayHello1: String => Unit = sayHello val mySayHello2: (String, Int) => U ...
- asp.net core刷新css缓存
在非spa程序开发的时候.css经常会因为浏览器的缓存机制导致不刷新. 很多前端为了应对这个问题,都会引入webpack或者gulp等工具来处理css缓存的问题. 但是作为一个偏服务器端的程序员来说. ...
- 分库分表(6)--- SpringBoot+ShardingSphere实现分表+ 读写分离
分库分表(6)--- ShardingSphere实现分表+ 读写分离 有关分库分表前面写了五篇博客: 1.分库分表(1) --- 理论 2.分库分表(2) --- ShardingSphere(理论 ...
- BZOJ 4597: [Shoi2016]随机序列
4597: [Shoi2016]随机序列 Time Limit: 20 Sec Memory Limit: 256 MBSubmit: 255 Solved: 174[Submit][Status ...