当人们右键单击正文时，我正在尝试创建一个自定义上下文菜单。我不确定如何将菜单绑定(bind)到右键单击事件，也不确定如何设置上下文菜单。我的第一个问题是如何将菜单绑定(bind)到右键单击事件。第二个问题是寻找菜单的一些文档。非常感谢。
我的代码:
$(document).ready(function() {
// right click event
$("body")
.mouseup(function(e) {
if (e.button == 2) {
$(this).append("<span style='color:#f00;'>Mouse up.</span>");
return false;
}
return true;
})
.mousedown(function(e) {
if (e.button == 2) {
rightClickMenu();
return false;
}
return true;
});
$("body").append("<div id='div1'></div>");
function rightClickMenu() {
contextMenu({},
items: {
"edit": {
name: "Edit",
icon: "edit"
},
"cut": {
name: "Cut",
icon: "cut"
},
"copy": {
name: "Copy",
icon: "copy"
},
"paste": {
name: "Paste",
icon: "paste"
},
"delete": {
name: "Delete",
icon: "delete"
}
});
}
}); // end ready#div1 {
background-color: lightgreen;
height: 100px;
width: 100px;
left: 500px;
top: 500px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="div1">
</div>最佳答案
几个月前我做了一个非常复杂的解决方案，但只是一个简短的片段来展示我如何通过右键单击获得 Prop 后解决它。 首先，我使用 event.special 制作了自己的事件
$.event.special.clickContextMenu = {
bindType: 'mouseup',
delegateType: 'mouseup',
handle: function (event) {
var $this = $(this);
var args = arguments;
event.stopPropagation();
event.preventDefault();
if (event.which === 3) {
$(event.target).contextmenu( function() {
if ($('#ufdContextMenu').length > 0) {
return false;
} else {
$(event.target).ufdContextMenu({'top':event.pageY, 'left':event.pageX});
return false;
}
});
}
}
}
当我初始化必须获得上下文菜单的元素时，我做了如下操作:
$(this).BuildContextMenu({'status':status, 'number':obj1.Number});
$(this).on( "clickContextMenu", function(){} );
这里是构建菜单的插件:
$.fn.BuildContextMenu = function (method) {
var args = arguments;
var $this = $(this);
return this.each(function () {
if ($.fn.BuildContextMenu.methods[method]) {
return $.fn.BuildContextMenu.methods[method].apply(this, Array.prototype.slice.call(args, 1));
} else if (typeof method === 'object' || !method) {
if ($this.data('BuildContextMenu')) {
var opts = $.extend({}, $this.data('BuildContextMenu'), method);
} else {
var opts = $.extend({}, $.fn.BuildContextMenu.defaults, method, $this.data());
}
} else {
$.error('Method "' + method + '" does not exist');
}
if (!$this.data('BuildContextMenu')){
$this.data('BuildContextMenu', {})
};
if (opts) $.extend($this.data('BuildContextMenu'), opts);
$this.BuildContextMenu('buildMenu');
});
}
$.fn.BuildContextMenu.defaults = {
status: null,
number: null
}
$.fn.BuildContextMenu.methods = {
buildMenu: function () {
var $this = $(this);
var opts = $this.data('BuildContextMenu');
var menu = $('<ul class="contextMenu"></ul>');
if (opts.status.contextMenu != undefined) {
$.each(opts.status.contextMenu, function (key, value) {
console.log(value);
if (value=='transfer') {
var item = $('<li><i class="icon i_cm_transfer">'+content0+'</i></li>').on('click', function () {
console.log(content0);
}).appendTo(menu);
} else if (value=='call'){
var item = $('<li><i class="icon i_cm_call">'+content1+'</i></li>').on('click', function () {
$console.log(content1);
}).appendTo(menu)
} else if (value=='request Transfer'){
var item = $('<li><i class="icon i_cm_requestTransfer">'+content2+'</i></li>').on('click', function () {
$console.log(content2);
}).appendTo(menu)
} else if (value=='chat'){
var item = $('<li><i class="icon i_cm_chat">'+content3+'</i></li>').on('click', function () {
$console.log(content3);
}).appendTo(menu)
} else if (value=='abort'){
var item = $('<li><i class="icon i_cm_abort">'+content4+'</i></li>').on('click', function () {
console.log(content4);
}).appendTo(menu)
} else if (value=='pickup'){
var item = $('<li><i class="icon i_cm_pickup">'+$content5+'</i></li>').on('click', function () {
console.log(content5);
}).appendTo(menu)
}
});
}
$(this).data('menu', menu);
}
}
这里是显示上下文菜单的插件:
$.fn.ufdContextMenu = function (method) {
var args = arguments;
var $this = $(this);
return this.each(function () {
if ($.fn.ufdContextMenu.methods[method]) {
return $.fn.ufdContextMenu.methods[method].apply(this, Array.prototype.slice.call(args, 1));
} else if (typeof method === 'object' || !method) {
if ($this.data('ufdContextMenu')) {
var opts = $.extend({}, $this.data('ufdContextMenu'), method);
} else {
var opts = $.extend({}, $.fn.ufdContextMenu.defaults, method, $this.data());
}
} else {
$.error('Method "' + method + '" does not exist');
}
if (!$this.data('ufdContextMenu')){
$this.data('ufdContextMenu', {})
};
if (opts) $.extend($this.data('ufdContextMenu'), opts);
$this.ufdContextMenu('showMenu');
});
};
$.fn.ufdContextMenu.defaults = {
menuID: 'ufdContextMenu',
timer: 2000,
appendTo: $(document.body),
top: 0,
left: 0
}
$.fn.ufdContextMenu.methods = {
destroy: function () {
var $this = $(this);
var opts = $this.data('ufdContextMenu');
var doc = $(document.body);
var menu = $(document.body).find('#'+opts.menuID);
menu.off();
menu.remove();
},
showMenu: function () {
var $this = $(this);
var opts = $this.data('ufdContextMenu');
var menu = $this.data('menu');
var doc = $(document.body);
var timeout = setTimeout(function (){
$this.ufdContextMenu('destroy');
}, opts.timer);
if (menu == undefined) {
$.error("this element don't have a context menu to show!");
return false;
}
menu.attr('id', opts.menuID);
menu.css({
'position': 'absolute',
'z-index': '9999',
'top': opts.top + 'px',
'left': opts.left + 'px'
});
menu.on("mouseleave", function(e) {
timeout = setTimeout(function (){
$this.ufdContextMenu('destroy');
}, opts.timer);
});
menu.on("mouseenter", function(e) {
if (timeout != null) {
clearTimeout(timeout);
timeout = null;
}
});
doc.append(menu);
}
}
希望这对您有帮助。
关于javascript - 如何将右键单击上下文菜单绑定(bind)到右键单击 jQuery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37295562/