jQuery Make left调用右键单击上下文菜单
我正在使用我在这里找到的一些function： http ： //www.trendskitchens.co.nz/jquery/contextmenu/
它让我开始制作一个漂亮的上下文菜单。 我的目的是让这个上下文菜单右键或左键单击“Pop”。 但我可能并不总是希望绑定左键单击，所以我需要能够始终进行右键单击，并且当我需要时，使用一些代码使左键单击也可以。
首先，要测试你需要jQuery用于演示，我使用的是1.8.2
这是插件的来源：
/* * ContextMenu - jQuery plugin for right-click context menus * * Author: Chris Domigan * Contributors: Dan G. Switzer, II * Parts of this plugin are inspired by Joern Zaefferer's Tooltip plugin * * Dual licensed under the MIT and GPL licenses: * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html * * Version: r2 * Date: 16 July 2007 * * For documentation visit http://www.trendskitchens.co.nz/jquery/contextmenu/ * */ (function($) { var menu, shadow, trigger, content, hash, currentTarget; var defaults = { menuStyle: { listStyle: 'none', padding: '1px', margin: '0px', backgroundColor: '#fff', border: '1px solid #999', width: '100px' }, itemStyle: { margin: '0px', color: '#000', display: 'block', cursor: 'default', padding: '3px', border: '1px solid #fff', backgroundColor: 'transparent' }, itemHoverStyle: { border: '1px solid #0a246a', backgroundColor: '#b6bdd2' }, eventPosX: 'pageX', eventPosY: 'pageY', shadow : true, onContextMenu: null, onShowMenu: null }; $.fn.contextMenu = function(id, options) { if (!menu) { // Create singleton menu menu = $('') .hide() .css({position:'absolute', zIndex:'500'}) .appendTo('body') .bind('click', function(e) { e.stopPropagation(); }); } if (!shadow) { shadow = $('') .css({backgroundColor:'#000',position:'absolute',opacity:0.2,zIndex:499}) .appendTo('body') .hide(); } hash = hash || []; hash.push({ id : id, menuStyle: $.extend({}, defaults.menuStyle, options.menuStyle || {}), itemStyle: $.extend({}, defaults.itemStyle, options.itemStyle || {}), itemHoverStyle: $.extend({}, defaults.itemHoverStyle, options.itemHoverStyle || {}), bindings: options.bindings || {}, shadow: options.shadow || options.shadow === false ? options.shadow : defaults.shadow, onContextMenu: options.onContextMenu || defaults.onContextMenu, onShowMenu: options.onShowMenu || defaults.onShowMenu, eventPosX: options.eventPosX || defaults.eventPosX, eventPosY: options.eventPosY || defaults.eventPosY }); var index = hash.length - 1; $(this).bind('contextmenu', function(e) { // Check if onContextMenu() defined var bShowContext = (!!hash[index].onContextMenu) ? hash[index].onContextMenu(e) : true; if (bShowContext) display(index, this, e, options); return false; }); return this; }; function display(index, trigger, e, options) { var cur = hash[index]; content = $('#'+cur.id).find('ul:first').clone(true); content.css(cur.menuStyle).find('li').css(cur.itemStyle).hover( function() { $(this).css(cur.itemHoverStyle); }, function(){ $(this).css(cur.itemStyle); } ).find('img').css({verticalAlign:'middle',paddingRight:'2px'}); // Send the content to the menu menu.html(content); // if there's an onShowMenu, run it now -- must run after content has been added // if you try to alter the content variable before the menu.html(), IE6 has issues // updating the content if (!!cur.onShowMenu) menu = cur.onShowMenu(e, menu); $.each(cur.bindings, function(id, func) { $('#'+id, menu).bind('click', function(e) { hide(); func(trigger, currentTarget); }); }); menu.css({'left':e[cur.eventPosX],'top':e[cur.eventPosY]}).show(); if (cur.shadow) shadow.css({width:menu.width(),height:menu.height(),left:e.pageX+2,top:e.pageY+2}).show(); $(document).one('click', hide); } function hide() { menu.hide(); shadow.hide(); } // Apply defaults $.contextMenu = { defaults : function(userDefaults) { $.each(userDefaults, function(i, val) { if (typeof val == 'object' && defaults[i]) { $.extend(defaults[i], val); } else defaults[i] = val; }); } }; })(jQuery); $(function() { $('div.contextMenu').hide(); }); 和我的页面来源：
$(document).ready(function() { /// Replace the intrinsic Context Menu with MINE $('span.infoholder').contextMenu('myMenu',{ onContextMenu: function(e) { iDataID = $(e.target).attr('id').replace("menu_",""); iGroupID = $(e.target).attr('name'); } }); /// Get the Left Click to behave as the right click... $("span.infoholder").click(function(event) { alert("I am in " + event.which); // on right click if (event.which == "1") { // prevent left click from being interpreted by the browser: $("#"+$(event.target).attr("id")).trigger({ type: 'click', which: 3 }); } }); }); Test 1 Test 2
这有点缺失，但这里的来源为我们提供了一个很好的示例来开始解决这个问题。 这又是“如何左键单击以调用此插件的自定义上下文菜单”
这是答案，将它绑定到插件Javascript中的点击
$(this).bind('click', function(e) { // Check if onContextMenu() defined var bShowContext = (!!hash[index].onContextMenu) ? hash[index].onContextMenu(e) : true; if (bShowContext) display(index, this, e, options); return false; });
只需将’contextmenu添加到绑定到的项：
$(this).bind('click contextmenu', function(e) { // Check if onContextMenu() defined var bShowContext = (!!hash[index].onContextMenu) ? hash[index].onContextMenu(e) : true; if (bShowContext) display(index, this, e, options); return false; }); return this;