Javascript 创建自定义右键单击菜单并将其绑定到另一个div内的右键单击_Javascript_Jquery

Javascript 创建自定义右键单击菜单并将其绑定到另一个div内的右键单击

javascript jquery

Javascript 创建自定义右键单击菜单并将其绑定到另一个div内的右键单击,javascript,jquery,Javascript,Jquery,我需要你的帮助如果不使用冗长且代码资源密集的jQuery和Javascript上下文菜单插件，那么如何使用简单的jQuery代码基本上获取我的div（其id为：“右键单击菜单”），并将右键单击操作绑定到另一个id为box1的div 这是一把小提琴：以下是HTML标记： <!DOCTYPE html> <html> <head> <style type="text/css"> #right-click-menu { width:

我需要你的帮助

如果不使用冗长且代码资源密集的jQuery和Javascript上下文菜单插件，那么如何使用简单的jQuery代码基本上获取我的div（其id为：“右键单击菜单”），并将右键单击操作绑定到另一个id为box1的div

这是一把小提琴：

以下是HTML标记：

<!DOCTYPE html>

<html>

<head>

<style type="text/css">

#right-click-menu {
    width: 150px;
    border-top: 1px solid rgb(212,208,200);
    border-left: 1px solid rgb(212,208,200);
    border-right: 1px solid rgb(64,64,64);
    border-bottom: 1px solid rgb(64,64,64);
    font-family: tahoma;
    font-size: 8.5pt;
    box-shadow: 2px 2px 2px rgb(142,142,142);
}
#right-click-menu ul {
    list-style-type: none;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-right: 1px solid rgb(128,128,128);
    border-bottom: 1px solid rgb(128,128,128);
    background: rgb(212,208,200);

    margin: 0;
    padding: 2px
}
#right-click-menu ul li {
    padding: 4px;
}
#right-click-menu li:hover {
    color: #fff;
    cursor: pointer;
    background: rgb(10,36,106);
}

</style>

</head>

<body>

    <div id="right-click-menu">
        <ul>

            <li>option1</li>
            <li>option2</li>
            <li>option3</li>
            <li>option4</li>        
        </ul>
    </div>
<br>
<div id="box1" style="border: 1px solid red; width: 200px; height: 50px;"></div>
</body>

</html>


#右击菜单{
宽度：150px；
边框顶部：1px实心rgb（212208200）；
左边框：1px实心rgb（212208200）；
右边框：1px实心rgb（64,64,64）；
边框底部：1px实心rgb（64,64,64）；
字体系列：tahoma；
字号：8.5pt；
盒影：2×2×2×rgb（142142）；
}
#右击菜单{
列表样式类型：无；
边框顶部：1px实心#fff；
左边框：1px实心#fff；
右边框：1px实心rgb（128128）；
边框底部：1px实心rgb（128128）；
背景：rgb（212208200）；
保证金：0；
填充：2件
}
#右键单击菜单ulli{
填充：4px；
}
#右键单击菜单li：悬停{
颜色：#fff；
光标：指针；
背景：rgb（1036106）；
}

选择1
选择2
选择3
选项4

可能是这样的？

Javascript:

$(document).ready(function() {
    $('#box1').mouseup(function(event) {
        if (event.which == 3) { // right click   
            $('#right-click-menu').offset({ top: event.pageY, left: event.pageX });
        }
    });    
});

HTML：确保菜单包含

position:absolute

，以允许其移动，并且

oncontextmenu

返回false以防止默认浏览器右键单击

<div id="right-click-menu" style="position:absolute;" oncontextmenu="return false;">
    <ul>            
        <li>option1</li>
        <li>option2</li>
        <li>option3</li>
        <li>option4</li>        
    </ul>
</div>
<br>
<div id="box1" style="border: 1px solid red; width: 200px; height: 50px;"></div>



选择1
选择2
选择3
选项4

小提琴：

您可能希望包括一些内容，例如在开始时隐藏菜单以及选择选项时隐藏菜单，但这应该可以让您开始

查看您的评论，您可能在项目中包含jQuery，也可能没有，这是一个Javascript插件。上面的代码是使用jQuery编写的，因此请确保在HTML中包含指向它的链接。

“只需使用普通、简单和普通的jQuery代码”。。。我当然希望你指的是JavaScript而不是jQuery。我不知道jQuery有一个普通的…--它本身已经是一个库了。我投票决定关闭，因为这个问题被标记为JS，但没有JS尝试。请编辑并向我们展示您在向我们请求代码之前尝试过的内容。我没有尝试过任何东西，因为我是新手，不知道从哪里开始编码。我不想再增加一个插件。

<div id="right-click-menu" style="position:absolute;" oncontextmenu="return false;">
    <ul>            
        <li>option1</li>
        <li>option2</li>
        <li>option3</li>
        <li>option4</li>        
    </ul>
</div>
<br>
<div id="box1" style="border: 1px solid red; width: 200px; height: 50px;"></div>