Jquery - 上下文菜单 - 右键单击答案

【问题标题】：Jquery - Context menu - rightclickJquery - 上下文菜单 - 右键单击
【发布时间】：2011-09-14 13:56:07
【问题描述】：

我使用 jquery 的插件 - ContextMenu。 - http://abeautifulsite.net/blog/2008/09/jquery-context-menu-plugin/

我在页面中心有一个 div。我在点中有背景图像。我需要它只在背景图像上使用 jquery 右键单击。如果单击背景图像，那么我想显示 ContextMenu。如果单击 id 为 divPage 的 div，则不会发生任何事情。

感谢您的建议或可能的其他解决方案。

HTML

<body>
<form id="formBackground" method="post">
<ul id="myMenu" class="contextMenu">
                    <li class="insert"><a href="#insert">Add New</a></li>       
                    <li class="edit"><a href="#edit">Edit</a></li>                  
                    <li class="delete"><a href="#delete">Delete</a></li>            
                </ul>

    <div id="divPage">
Text.
    </div>
</form>

CSS

body, html {
height: 100%;
}

body{
padding: 0px;
margin: 0px;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
color: white;
background-image: url('../images/backgrounds/bg.jpg');
background-repeat:no-repeat;
background-position:top;
}

div#divPage{
width: 800px;
height: 300px;
margin: auto;
}

$('body').bind('mousedown', function (evt) {

                switch (evt.which) {       
            case 3:
            if(evt.target == $('body')[0]) {
                //Show context menu
            }
            break;
    }                

            });

【问题讨论】：

标签： jquery contextmenu background-image right-click

【解决方案1】：

我认为你把事情复杂化了。

首先，我在您创建上下文菜单的代码中的任何地方都看不到您的List。

其次，您需要做的就是：

$("idOfTheObjectYouWantToHaveAMenuOn").contextMenu({menu:"yourList"});

【讨论】：

这是我的菜单列表 -

【解决方案2】：

为什么不让 div 本身被点击时弹出上下文菜单？如果您只需要通过单击 bg 图像来显示菜单，则需要将图像放入 div 本身并设置样式，使其像 bg 图像一样。你可以用 css z-index 和 position absolute 来做到这一点

【讨论】：

我只想点击背景图片。