网页开发利用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 ...
随机推荐
- 基于Python协同过滤算法的认识
Contents 1. 协同过滤的简介 2. 协同过滤的核心 3. 协同过滤的实现 4. 协同过滤的应用 1. 协同过滤的简介 关于协同过滤的一个最经典的例子就是看电影,有时候 ...
- java跬步积累
1.eclipse自动生成get/set方法快捷键 alt+shift+s +r 2.eclipse自动生成等号左边快捷键 将光标移到:号右边,然后按Ctrl+1 3.补全代码快捷键 Alt+/ 4. ...
- iframe 设置占屏幕高度 100%
给 iframe 元素设置 fixed 定位,并且设置 100% 的宽和高: iframe { position: fixed; background: #000; border: none; top ...
- 详解PHP魔术函数、魔术常量、预定义常量
一.魔术函数(13个) 1.__construct() 实例化对象时被调用, 当__construct和以类名为函数名的函数同时存在时,__construct将被调用,另一个不被调用. 2.__des ...
- java第1天:简介，入门程序，变量，常量
1 java语言简介 美国的SUN公司开发的静态面向对象的编程语言,后来被甲骨文公司收购,现在也是全球范围内最受欢迎的编程语言. *** 2 计算机进制的相互转换 进制 英文代号 2进制 bin 8进 ...
- RocketMQ消息队列部署与可视化界面安装
MQ安装部署 最新版本下载:http://rocketmq.apache.org/release_notes 修改配置 vi conf/broker.conf 添加brokerIP1 brokerIP ...
- vue3.0 vue.config.js 配置实战
今天讲述一下vue-config.js配置,我们前面搭建好脚手架会发现,这个对比2.x版本少了很多东西,没有build的配置,也没有webpack的配置,那么问题来了,我们如何去开发我们的项目呢,比如 ...
- 一个纯CSS实现的卡片翻转效果
先上代码 <div id="box"> <div class="front">正面</div> <div class= ...
- Spring Boot2 系列教程(十二)@ControllerAdvice 的三种使用场景
严格来说,本文并不算是 Spring Boot 中的知识点,但是很多学过 SpringMVC 的小伙伴,对于 @ControllerAdvice 却并不熟悉,Spring Boot 和 SpringM ...
- LRU算法实现，HashMap与LinkedHashMap源码的部分总结
关于HashMap与LinkedHashMap源码的一些总结 JDK1.8之后的HashMap底层结构中,在数组(Node<K,V> table)长度大于64的时候且链表(依然是Node) ...