网页开发利用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 ...
随机推荐
- 聚类算法之K-means
想想常见的分类算法有决策树.Logistic回归.SVM.贝叶斯等.分类作为一种监督学习方法,要求必须事先明确知道各个类别的信息,并且断言所有待分类项都有一个类别与之对应.但是很多时候上述条件得不到满 ...
- 无暇代码（js的整洁之道）
如果你关注代码本身和代码的编写方式,而不是只关心它是否能工作,那么你写代码是有一定的水准.专业开发人员将为未来的自己和“其他人”编写代码,而不仅仅只编写当前能工作就行的代码.在此基础上,简洁代码可以定 ...
- ORM增删改查
目录 orm django 连接mysql顺序 1 settings配置文件中 2 项目文件夹下的init文件中写上下面内容, 补充 3 models文件中创建一个类(类名就是表名) 4.执行数据库同 ...
- Python celery和Redis入门安装使用（排难帖）
1.redis安装 下载地址 https://github.com/MicrosoftArchive/redis/releases,选择Redis-x64-3.2.100.msi5.8 MB下载就好了 ...
- Django学习之model进阶
一 QuerySet 可切片 使用Python 的切片语法来限制查询集记录的数目 .它等同于SQL 的LIMIT 和OFFSET 子句. >>> Entry.objects.al ...
- webpack loader实现
正值前端组件化开发时代,那么必然离不开目前最火的构建工具--webpack(grunt,gulp等暂且不谈).说到这里,刚好有几个问题: 为什么运行打包命令之后,.vue 文件可以转成 .js 文件 ...
- Hadoop-2.7.3-本地模式安装-wordcount例子
准备虚拟机:linux-rhel-7.4-server,由于不使用虚拟机进行联网,所以选择host-only网络模式.此处,需要再VitralBox的管理菜单中的主机网络管理器新建一个虚拟网卡.安装完 ...
- 如何写md格式的文档
一.标题 标题其实和HTML中的h系列很像,想要设置为标题的文字前面加#来表示一个#是一级标题,二个#是二级标题,以此类推.支持六级标题. 注:标准语法一般在#后跟个空格再写文字, 示例: 效果如下: ...
- C#基于Quartz.NET实现任务调度并部署Windows服务
一.Quartz.NET介绍 Quartz.NET是一个强大.开源.轻量的作业调度框架,是 OpenSymphony 的 Quartz API 的.NET移植,用C#改写,可用于winform和asp ...
- Python历史+优缺点+应用领域+网站职位简介
一.Python的历史 1. 1989年圣诞节:Guido von Rossum开始写Python语言的编译器.2. 1991年2月:第一个Python编译器(同时也是解释器)诞生,它是用C语言实现的 ...