jq实现自定义右键功能
前情提要
禁止原右键 审查元素等功能 实现自定义右键
html页面代码
<!--
作者：1906244925@qq.com
时间：2021-02-25
描述：禁止原鼠标右键 并修改功能
博客：https://bree.vip
-->
<!DOCTYPE html>
<html xml:lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>修改右键功能</title>
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div style="text-align: center">
<img src="https://ae01.alicdn.com/kf/Udf6e238390df455986c59d123343e16dd.jpg" class="xzimges">
</div>
<script src="js/jquery.min.js"></script>
<script src="js/mouseRight.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
引入css文件
.shade {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
display: none;
}
.wrap-ms-right {
list-style: none;
position: absolute;
top: 0;
left: 0;
padding: 5px 0;
min-width: 80px;
z-index: 1;
margin: 0;
display: none;
font-family: "微软雅黑";
font-size: 14px;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, .15);
box-sizing: border-box;
border-radius: 4px;
-webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.ms-item {
height: 30px;
line-height: 30px;
text-align: center;
cursor: pointer;
}
.ms-item:hover {
background-color: #343a40;
color: #FFFFFF;
}
body {
width: 1200px;
height: 500px;
overflow: hidden;
}
.xzimges {
width: 100px;
height: 100px;
margin-top: 20px;
border-radius: 50%;
position: relative;
animation: rotating 1.2s linear infinite;
-webkit-animation: rotating 20s infinite; /*Safari and Chrome*/
}
@keyframes rotating {
from {
transform: rotate(0)
}
to {
transform: rotate(360deg)
}
}
引入mouseRight.min.js
;(function ($, window) {
$.prototype.mouseRight = function (options, callback) {
var defaults, settings, me, _this;
me = this;
defaults = {menu: [{}], ele: 'body'};
settings = $.extend({}, defaults, options);
$(this).each(function () {
(function () {
var parentDiv = $('<div></div>');
parentDiv.attr('class', 'wrap-ms-right');
for (let i = 0; i < settings.menu.length; i++) {
var childDiv = $('<li></li>');
childDiv.addClass('ms-item');
var childDiv1 = $('<i></i>');
childDiv.attr('data-item', i);
childDiv1.addClass(settings.menu[i].icon);
childDiv1.attr('data-item', i);
childDiv1.appendTo(childDiv);
childDiv.appendTo(parentDiv);
childDiv1.after(' ' + settings.menu[i].itemName)
}
parentDiv.prependTo('body');
var parentShade = $('<div></div>');
parentShade.attr('class', 'shade');
parentShade.prependTo('body')
})();
window.oncontextmenu = function () {
return false
};
$(settings.ele).mousedown(function (e) {
if (e.which === 3) {
$('.wrap-ms-right').css({'display': 'block', 'top': e.pageY + 'px', 'left': e.pageX + 'px'});
$('.shade').css({'display': 'block'})
}
});
$('.ms-item').click(function (e) {
var clickID = parseInt($(e.target).attr('data-item'));
for (let i = 0; i < settings.menu.length; i++) {
if (clickID == i) {
settings.menu[i].callback();
$('.wrap-ms-right').css({'display': 'none'});
$('.shade').css({'display': 'none'})
}
}
});
$('.shade').click(function () {
$('.wrap-ms-right').css({'display': 'none'});
$('.shade').css({'display': 'none'})
})
});
return this
}
})(jQuery, window)
引入index.js
$('body').mouseRight({
menu: [{
itemName: "添加",
icon: "fa fa-plus",
callback: function () {可自定义点击后的事件}
}, {
itemName: "修改",
icon: "fa fa-files-o",
callback: function () {可自定义点击后的事件}
}, {
itemName: "粘贴",
icon: "fa fa-clipboard",
callback: function () {可自定义点击后的事件}
}, {
itemName: "删除",
icon: "fa fa-trash",
callback: function () {可自定义点击后的事件}
}]
});
