网页开发利用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 ...
随机推荐
- CSS 换行
默认情况下,元素的属性是 white-space:normal:自动换行:(不把单词截断,会把单词看作一个整体) -----但是但是但是但是..当元素中的内容是一对没有空格的字符/数字时,超过容器宽度 ...
- Kubernetes 系列(六):持久化存储 PV与PVC
在使用容器之后,我们需要考虑的另外一个问题就是持久化存储,怎么保证容器内的数据存储到我们的服务器硬盘上.这样容器在重建后,依然可以使用之前的数据.但是显然存储资源和 CPU 资源以及内存资源有很大不同 ...
- RabbitMQ原理介绍
RabbitMQ历史 RabbitMQ消息系统是一个由erlang开发的AMQP(Advanced Message Queue )的开源实现.在同步消息通讯的世界里有很多公开标准(如COBAR的IIO ...
- 面试官:你有m个鸡蛋,如何用最少的次数测出鸡蛋会在哪一层碎?
假设你面前有一栋n层的大楼和m个鸡蛋,假设将鸡蛋从f层或更高的地方放扔下去,鸡蛋才会碎,否则就不会.你需要设计一种策略来确定f的值,求最坏情况下扔鸡蛋次数的最小值. leetcode原题链接 乍一看这 ...
- [scrapy-redis] 将scrapy爬虫改造成分布式爬虫 (2)
1. 修改redis设置 redis默认处在protection mode, 修改/etc/redis.conf, protected-mode no, 或者给redis设置密码, 将bind 127 ...
- python爬虫入门10分钟爬取一个网站
一.基础入门 1.1什么是爬虫 爬虫(spider,又网络爬虫),是指向网站/网络发起请求,获取资源后分析并提取有用数据的程序. 从技术层面来说就是 通过程序模拟浏览器请求站点的行为,把站点返回的HT ...
- 开发一个带UI的库(asp.net core 3.0)
在GitHub上有个项目,本来是作为自己研究学习.net core的Demo,没想到很多同学在看,还给了很多星,所以觉得应该升成3.0,整理一下,写成博分享给学习.net core的同学们. 项目名称 ...
- 从xxe-lab来深入学习xxe漏洞
这几天,想复习一下xxe的知识,于是把以前的一个靶场拿过来玩玩,顺便审计一下代码2333,靶场地址:https://github.com/c0ny1/xxe-lab 首先先练习的是php-xxe: 我 ...
- 落谷P3941 入阵曲
题目背景 pdf题面和大样例链接:http://pan.baidu.com/s/1cawM7c 密码:xgxv 丹青千秋酿,一醉解愁肠. 无悔少年枉,只愿壮志狂. 题目描述 小 F 很喜欢数学,但是到 ...
- vim 的初始配置
我是一个vim爱好者,项目开发过程中,大量地使用vim作为编辑工具. 今天刚开箱了一台新的 CentOS7, 现将Vim安装后的一些基本配置作一下记录. 使用配置模板 vim安装完之后,大多数配置都是 ...