blocks|key|3216602|text|浏览器的上下文菜单正在被覆盖。在任何主流浏览器中，都无法增加本机上下文菜单。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3216603|由于插件正在创建自己的菜单，所以唯一真正抽象的部分是浏览器的上下文菜单事件。该插件根据您的配置创建一个html菜单，然后将内容放在您单击的位置。|3216604|是的，这是创建自定义上下文菜单的唯一方法。显然，不同的插件所做的事情略有不同，但它们都会覆盖浏览器的事件，并将它们自己的基于html的菜单放在正确的位置。|3216605|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

<p>The browser's context menu is being overridden. There is no way to augment the native context menu in any major browser.</p>

<p>Since the plugin is creating its own menu, the only part thats really being abstracted is the browser's context menu event. The plugin creates an html menu based on your configuration, then places that content at the location of your click.</p>

<p>Yes, this is the only way to go about creating a custom context menu. Obviously, different plugins do things slightly different, but they will all override the browser's event and place their own html-based menu in the correct place.</p>


blocks|key|284850|text|正如Adrian所说，插件将以同样的方式工作。您将需要三个基本部分：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|284851|1：'contextmenu'事件的事件处理程序：|offset|length|style|CODE|284852|$(document).bind("contextmenu",+function(event)+{
++++event.preventDefault();
++++$("<div+class='custom-menu'>Custom+menu</div>")
++++++++.appendTo("body")
++++++++.css({top:+event.pageY+%2B+"px",+left:+event.pageX+%2B+"px"});
});|code-block|syntax|javascript|284853|在这里，您可以将事件处理程序绑定到要显示其菜单的任何选择器。我已经选择了整个文档。|284854|2：'click'事件的事件处理程序(关闭自定义菜单)：|284855|$(document).bind("click",+function(event)+{
++++$("div.custom-menu").hide();
});|284856|3:控制菜单位置的CSS：|284857|.custom-menu+{
++++z-index:1000;
++++position:+absolute;
++++background-color:#C0C0C0;
++++border:+1px+solid+black;
++++padding:+2px;
}|284858|CSS的重要之处在于包含了z-index和position:+absolute|284859|将所有这些都封装在一个漂亮的jQuery插件中并不是太难。|284860|你可以在这里看到一个简单的演示：http://jsfiddle.net/andrewwhitaker/fELma/|284861|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/andrewwhitaker/fELma/^0|0|2|D|0|0|0|2|7|0|0|0|0|D|7|L|I|0|0|G|15|0|0^^$0|@$1|2|3|4|5|6|7|1A|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1B|8|@$D|1C|E|1D|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|1E|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|1F|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1G|8|@$D|1H|E|1I|F|G]]|9|@]|A|$]]|$1|Q|3|R|5|J|7|1J|8|@]|9|@]|A|$K|L]]|$1|S|3|T|5|6|7|1K|8|@]|9|@]|A|$]]|$1|U|3|V|5|J|7|1L|8|@]|9|@]|A|$K|L]]|$1|W|3|X|5|6|7|1M|8|@$D|1N|E|1O|F|G]|$D|1P|E|1Q|F|G]]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|1R|8|@]|9|@]|A|$]]|$1|10|3|11|5|6|7|1S|8|@]|9|@$D|1T|E|1U|1|1V]]|A|$]]|$1|12|3|-4|5|6|7|1W|8|@]|9|@]|A|$]]]|13|$14|$5|15|16|17|A|$18|19]]]]

<p>As Adrian said, the plugins are going to work the same way.  There are three basic parts you're going to need:</p>

<p>1: Event handler for <code>'contextmenu'</code> event:</p>

<pre><code>$(document).bind("contextmenu", function(event) {
    event.preventDefault();
    $("&lt;div class='custom-menu'&gt;Custom menu&lt;/div&gt;")
        .appendTo("body")
        .css({top: event.pageY + "px", left: event.pageX + "px"});
});
</code></pre>

<p>Here, you could bind the event handler to any selector that you want to show a menu for.  I've chosen the entire document.</p>

<p>2: Event handler for <code>'click'</code> event (to close the custom menu):</p>

<pre><code>$(document).bind("click", function(event) {
    $("div.custom-menu").hide();
});
</code></pre>

<p>3: CSS to control the position of the menu:</p>

<pre><code>.custom-menu {
    z-index:1000;
    position: absolute;
    background-color:#C0C0C0;
    border: 1px solid black;
    padding: 2px;
}
</code></pre>

<p>The important thing with the CSS is to include the <code>z-index</code> and <code>position: absolute</code></p>

<p>It wouldn't be too tough to wrap all of this in a slick jQuery plugin.</p>

<p>You can see a simple demo here: <a href="http://jsfiddle.net/andrewwhitaker/fELma/">http://jsfiddle.net/andrewwhitaker/fELma/</a></p>


blocks|key|3216742|text|您可以观看本教程：http://www.youtube.com/watch?v=iDyEfKWCzhg确保上下文菜单一开始是隐藏的，并且位置是绝对的。这将确保不会有多个上下文菜单和无用的上下文菜单创建。指向该页面的链接放在YouTube视频的描述中。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3216743|$(document).bind("contextmenu",+function(event){
$("#contextmenu").css({"top":+event.pageY+%2B++"px",+"left":+event.pageX+%2B++"px"}).show();
});
$(document).bind("click",+function(){
$("#contextmenu").hide();
});|code-block|syntax|javascript|3216744|entityMap|0|LINK|mutability|MUTABLE|url|http://www.youtube.com/watch?v=iDyEfKWCzhg^0|9|16|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>You can watch this tutorial: <a href="http://www.youtube.com/watch?v=iDyEfKWCzhg" rel="nofollow">http://www.youtube.com/watch?v=iDyEfKWCzhg</a>
Make sure the context menu is hidden at first and has a position of absolute. This will 
ensure that there won't be multiple context menu and useless creation of context menu. The link to the page is placed in the description of the YouTube video.</p>

<pre><code>$(document).bind("contextmenu", function(event){
$("#contextmenu").css({"top": event.pageY +  "px", "left": event.pageX +  "px"}).show();
});
$(document).bind("click", function(){
$("#contextmenu").hide();
});
</code></pre>


blocks|key|284924|text|我知道这个问题很老了，但我只是想出了同样的问题，并自己解决了它，所以我回答了这个问题，以防有人像我一样通过谷歌找到这个问题。我的解决方案基于@Andrew的解决方案，但基本上后来都进行了修改。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|284925|编辑：看到这个最近很受欢迎，我决定也更新样式，让它看起来更像2014年，而不是Windows95。我修复了@Quantico和@Trengot的错误，所以现在它是一个更可靠的答案。|offset|length|style|BOLD|284926|EDIT+2：我用StackSnippets设置了它，因为它们是一个非常酷的新功能。我把留在这里作为参考(点击第四个面板看看它们是如何工作的)。|284927|新的堆栈代码段：|284928|​|284929|//+JAVASCRIPT+(jQuery)

//+Trigger+action+when+the+contexmenu+is+about+to+be+shown
$(document).bind("contextmenu",+function+(event)+{
++++
++++//+Avoid+the+real+one
++++event.preventDefault();
++++
++++//+Show+contextmenu
++++$(".custom-menu").finish().toggle(100).
++++
++++//+In+the+right+position+(the+mouse)
++++css({
++++++++top:+event.pageY+%2B+"px",
++++++++left:+event.pageX+%2B+"px"
++++});
});


//+If+the+document+is+clicked+somewhere
$(document).bind("mousedown",+function+(e)+{
++++
++++//+If+the+clicked+element+is+not+the+menu
++++if+(!$(e.target).parents(".custom-menu").length+>+0)+{
++++++++
++++++++//+Hide+it
++++++++$(".custom-menu").hide(100);
++++}
});


//+If+the+menu+element+is+clicked
$(".custom-menu+li").click(function(){
++++
++++//+This+is+the+triggered+action+name
++++switch($(this).attr("data-action"))+{
++++++++
++++++++//+A+case+for+each+action.+Your+actions+here
++++++++case+"first":+alert("first");+break;
++++++++case+"second":+alert("second");+break;
++++++++case+"third":+alert("third");+break;
++++}
++
++++//+Hide+it+AFTER+the+action+was+triggered
++++$(".custom-menu").hide(100);
++});|code-block|syntax|javascript|284930|/*+CSS3+*/

/*+The+whole+thing+*/
.custom-menu+{
++++display:+none;
++++z-index:+1000;
++++position:+absolute;
++++overflow:+hidden;
++++border:+1px+solid+#CCC;
++++white-space:+nowrap;
++++font-family:+sans-serif;
++++background:+#FFF;
++++color:+#333;
++++border-radius:+5px;
++++padding:+0;
}

/*+Each+of+the+items+in+the+list+*/
.custom-menu+li+{
++++padding:+8px+12px;
++++cursor:+pointer;
++++list-style-type:+none;
++++transition:+all+.3s+ease;
++++user-select:+none;
}

.custom-menu+li:hover+{
++++background-color:+#DEF;
}|284931|
<script+type="text/javascript"+src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>

<ul+class='custom-menu'>
++<li+data-action="first">First+thing</li>
++<li+data-action="second">Second+thing</li>
++<li+data-action="third">Third+thing</li>
</ul>


Right+click+me|284932|284933|注意:你可能会看到一些小错误(离光标很远的下拉列表等)，请确保它在jsfiddle中工作，因为这比StackSnippets更类似于你的网页。|284934|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/u2kJq/241/^0|0|0|2|0|0|6|0|0|0|0|0|0|0|X|8|0|0^^$0|@$1|2|3|4|5|6|7|17|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|18|8|@$D|19|E|1A|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|1B|8|@$D|1C|E|1D|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|1E|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1F|8|@]|9|@]|A|$]]|$1|N|3|O|5|P|7|1G|8|@]|9|@]|A|$Q|R]]|$1|S|3|T|5|P|7|1H|8|@]|9|@]|A|$Q|R]]|$1|U|3|V|5|P|7|1I|8|@]|9|@]|A|$Q|R]]|$1|W|3|M|5|6|7|1J|8|@]|9|@]|A|$]]|$1|X|3|Y|5|6|7|1K|8|@]|9|@$D|1L|E|1M|1|1N]]|A|$]]|$1|Z|3|-4|5|6|7|1O|8|@]|9|@]|A|$]]]|10|$11|$5|12|13|14|A|$15|16]]]]

<p>I know this question is very old, but just came up with the same problem and solved it myself, so I'm answering in case anyone finds this through google as I did. I based my solution on @Andrew's one, but basically modified everything afterwards.</p>

<p><strong>EDIT</strong>: seeing how popular this has been lately, I decided to update also the styles to make it look more like 2014 and less like windows 95. I fixed the bugs @Quantico and @Trengot spotted so now it's a more solid answer.</p>

<p><strong>EDIT 2</strong>: I set it up with StackSnippets as they're a really cool new feature. I leave the <strong><a href="http://jsfiddle.net/u2kJq/241/" rel="noreferrer">good jsfiddle</a></strong> here for reference thought (click on the 4th panel to see them work).</p>

<p>New Stack Snippet:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// JAVASCRIPT (jQuery)

// Trigger action when the contexmenu is about to be shown
$(document).bind("contextmenu", function (event) {
    
    // Avoid the real one
    event.preventDefault();
    
    // Show contextmenu
    $(".custom-menu").finish().toggle(100).
    
    // In the right position (the mouse)
    css({
        top: event.pageY + "px",
        left: event.pageX + "px"
    });
});


// If the document is clicked somewhere
$(document).bind("mousedown", function (e) {
    
    // If the clicked element is not the menu
    if (!$(e.target).parents(".custom-menu").length &gt; 0) {
        
        // Hide it
        $(".custom-menu").hide(100);
    }
});


// If the menu element is clicked
$(".custom-menu li").click(function(){
    
    // This is the triggered action name
    switch($(this).attr("data-action")) {
        
        // A case for each action. Your actions here
        case "first": alert("first"); break;
        case "second": alert("second"); break;
        case "third": alert("third"); break;
    }
  
    // Hide it AFTER the action was triggered
    $(".custom-menu").hide(100);
  });</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>/* CSS3 */

/* The whole thing */
.custom-menu {
    display: none;
    z-index: 1000;
    position: absolute;
    overflow: hidden;
    border: 1px solid #CCC;
    white-space: nowrap;
    font-family: sans-serif;
    background: #FFF;
    color: #333;
    border-radius: 5px;
    padding: 0;
}

/* Each of the items in the list */
.custom-menu li {
    padding: 8px 12px;
    cursor: pointer;
    list-style-type: none;
    transition: all .3s ease;
    user-select: none;
}

.custom-menu li:hover {
    background-color: #DEF;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- HTML --&gt;
&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"&gt;&lt;/script&gt;

&lt;ul class='custom-menu'&gt;
  &lt;li data-action="first"&gt;First thing&lt;/li&gt;
  &lt;li data-action="second"&gt;Second thing&lt;/li&gt;
  &lt;li data-action="third"&gt;Third thing&lt;/li&gt;
&lt;/ul&gt;

&lt;!-- Not needed, only for making it clickable on StackOverflow --&gt;
Right click me</code></pre>
</div>
</div>
</p>

<p>Note: you might see some small bugs (dropdown far from the cursor, etc), please make sure that it works in the <a href="http://jsfiddle.net/u2kJq/241/" rel="noreferrer">jsfiddle</a>, as that's more similar to your webpage than StackSnippets might be.</p>


blocks|key|3003360|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3003361|<!DOCTYPE+html>
<html>
<head>
++++<title>Right+Click</title>

++++<link+href="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.css"+rel="stylesheet"+type="text/css"+/>

++++<script+src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
++++<script+src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.js"+type="text/javascript"></script>

++++<script+src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.ui.position.min.js"+type="text/javascript"></script>

</head>
<body>
++++<span+class="context-menu-one"+style="border:solid+1px+black;+padding:5px;">Right+Click+Me</span>
++++<script+type="text/javascript">
++++++++
++++++++$(function()+{
++++++++$.contextMenu({
++++++++++++selector:+'.context-menu-one',+
++++++++++++callback:+function(key,+options)+{
++++++++++++++++var+m+=+"clicked:+"+%2B+key;
++++++++++++++++window.console+&&+console.log(m)+%7C%7C+alert(m);+
++++++++++++},
++++++++++++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"},
++++++++++++++++"sep1":+"---------",
++++++++++++++++"quit":+{name:+"Quit",+icon:+function(){
++++++++++++++++++++return+'context-menu-icon+context-menu-icon-quit';
++++++++++++++++}}
++++++++++++}
++++++++});

++++++++$('.context-menu-one').on('click',+function(e){
++++++++++++console.log('clicked',+this);
++++++++})++++
++++});
++++</script>
</body>
</html>|code-block|syntax|javascript|3003362|3003363|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|K|8|@]|9|@]|A|$E|F]]|$1|G|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|M|8|@]|9|@]|A|$]]]|I|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Right Click&lt;/title&gt;

    &lt;link href="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.css" rel="stylesheet" type="text/css" /&gt;

    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.js" type="text/javascript"&gt;&lt;/script&gt;

    &lt;script src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.ui.position.min.js" type="text/javascript"&gt;&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;
    &lt;span class="context-menu-one" style="border:solid 1px black; padding:5px;"&gt;Right Click Me&lt;/span&gt;
    &lt;script type="text/javascript"&gt;
        
        $(function() {
        $.contextMenu({
            selector: '.context-menu-one', 
            callback: function(key, options) {
                var m = "clicked: " + key;
                window.console &amp;&amp; console.log(m) || alert(m); 
            },
            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"},
                "sep1": "---------",
                "quit": {name: "Quit", icon: function(){
                    return 'context-menu-icon context-menu-icon-quit';
                }}
            }
        });

        $('.context-menu-one').on('click', function(e){
            console.log('clicked', this);
        })    
    });
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>


blocks|key|284949|text|下面是javascript中右键单击上下文菜单的示例：Right+Click+Context+Menu|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|284950|已将原始javasScript代码用于上下文菜单功能。你能检查一下这个吗，希望这能对你有所帮助。|284951|实时代码：|284952|​|284953|(function()+{
++
++"use+strict";


++/***********************************************+Context+Menu+Function+Only+********************************/
++function+clickInsideElement(+e,+className+)+{
++++var+el+=+e.srcElement+%7C%7C+e.target;
++++if+(+el.classList.contains(className)+)+{
++++++return+el;
++++}+else+{
++++++while+(+el+=+el.parentNode+)+{
++++++++if+(+el.classList+&&+el.classList.contains(className)+)+{
++++++++++return+el;
++++++++}
++++++}
++++}
++++return+false;
++}

++function+getPosition(e)+{
++++var+posx+=+0,+posy+=+0;
++++if+(!e)+var+e+=+window.event;
++++if+(e.pageX+%7C%7C+e.pageY)+{
++++++posx+=+e.pageX;
++++++posy+=+e.pageY;
++++}+else+if+(e.clientX+%7C%7C+e.clientY)+{
++++++posx+=+e.clientX+%2B+document.body.scrollLeft+%2B+document.documentElement.scrollLeft;
++++++posy+=+e.clientY+%2B+document.body.scrollTop+%2B+document.documentElement.scrollTop;
++++}
++++return+{
++++++x:+posx,
++++++y:+posy
++++}
++}

++//+Your+Menu+Class+Name
++var+taskItemClassName+=+"thumb";
++var+contextMenuClassName+=+"context-menu",contextMenuItemClassName+=+"context-menu__item",contextMenuLinkClassName+=+"context-menu__link",+contextMenuActive+=+"context-menu--active";
++var+taskItemInContext,+clickCoords,+clickCoordsX,+clickCoordsY,+menu+=+document.querySelector("#context-menu"),+menuItems+=+menu.querySelectorAll(".context-menu__item");
++var+menuState+=+0,+menuWidth,+menuHeight,+menuPosition,+menuPositionX,+menuPositionY,+windowWidth,+windowHeight;

++function+initMenuFunction()+{
++++contextListener();
++++clickListener();
++++keyupListener();
++++resizeListener();
++}

++/**
+++*+Listens+for+contextmenu+events.
+++*/
++function+contextListener()+{
++++document.addEventListener(+"contextmenu",+function(e)+{
++++++taskItemInContext+=+clickInsideElement(+e,+taskItemClassName+);

++++++if+(+taskItemInContext+)+{
++++++++e.preventDefault();
++++++++toggleMenuOn();
++++++++positionMenu(e);
++++++}+else+{
++++++++taskItemInContext+=+null;
++++++++toggleMenuOff();
++++++}
++++});
++}

++/**
+++*+Listens+for+click+events.
+++*/
++function+clickListener()+{
++++document.addEventListener(+"click",+function(e)+{
++++++var+clickeElIsLink+=+clickInsideElement(+e,+contextMenuLinkClassName+);

++++++if+(+clickeElIsLink+)+{
++++++++e.preventDefault();
++++++++menuItemListener(+clickeElIsLink+);
++++++}+else+{
++++++++var+button+=+e.which+%7C%7C+e.button;
++++++++if+(+button+===+1+)+{
++++++++++toggleMenuOff();
++++++++}
++++++}
++++});
++}

++/**
+++*+Listens+for+keyup+events.
+++*/
++function+keyupListener()+{
++++window.onkeyup+=+function(e)+{
++++++if+(+e.keyCode+===+27+)+{
++++++++toggleMenuOff();
++++++}
++++}
++}

++/**
+++*+Window+resize+event+listener
+++*/
++function+resizeListener()+{
++++window.onresize+=+function(e)+{
++++++toggleMenuOff();
++++};
++}

++/**
+++*+Turns+the+custom+context+menu+on.
+++*/
++function+toggleMenuOn()+{
++++if+(+menuState+!==+1+)+{
++++++menuState+=+1;
++++++menu.classList.add(+contextMenuActive+);
++++}
++}

++/**
+++*+Turns+the+custom+context+menu+off.
+++*/
++function+toggleMenuOff()+{
++++if+(+menuState+!==+0+)+{
++++++menuState+=+0;
++++++menu.classList.remove(+contextMenuActive+);
++++}
++}

++function+positionMenu(e)+{
++++clickCoords+=+getPosition(e);
++++clickCoordsX+=+clickCoords.x;
++++clickCoordsY+=+clickCoords.y;
++++menuWidth+=+menu.offsetWidth+%2B+4;
++++menuHeight+=+menu.offsetHeight+%2B+4;

++++windowWidth+=+window.innerWidth;
++++windowHeight+=+window.innerHeight;

++++if+(+(windowWidth+-+clickCoordsX)+<+menuWidth+)+{
++++++menu.style.left+=+(windowWidth+-+menuWidth)-0+%2B+"px";
++++}+else+{
++++++menu.style.left+=+clickCoordsX-0+%2B+"px";
++++}

++++//+menu.style.top+=+clickCoordsY+%2B+"px";

++++if+(+Math.abs(windowHeight+-+clickCoordsY)+<+menuHeight+)+{
++++++menu.style.top+=+(windowHeight+-+menuHeight)-0+%2B+"px";
++++}+else+{
++++++menu.style.top+=+clickCoordsY-0+%2B+"px";
++++}
++}


++function+menuItemListener(+link+)+{
++++var+menuSelectedPhotoId+=+taskItemInContext.getAttribute("data-id");
++++console.log('Your+Selected+Photo:+'%2BmenuSelectedPhotoId)
++++var+moveToAlbumSelectedId+=+link.getAttribute("data-action");
++++if(moveToAlbumSelectedId+==+'remove'){
++++++console.log('You+Clicked+the+remove+button')
++++}else+if(moveToAlbumSelectedId+&&+moveToAlbumSelectedId.length+>+7){
++++++console.log('Clicked+Album+Name:+'%2BmoveToAlbumSelectedId);
++++}
++++toggleMenuOff();
++}
++initMenuFunction();

})();|code-block|syntax|javascript|284954|/*+For+Body+Padding+and+content+*/
body+{+padding-top:+70px;+}
li+a+{+text-decoration:+none+!important;+}

/*+Thumbnail+only+*/
.thumb+{
++margin-bottom:+30px;
}
.thumb:hover+a,+.thumb:active+a,+.thumb:focus+a+{
++border:+1px+solid+purple;
}

/**************+For+Context+menu+***********/
/*+context+menu+*/
.context-menu+{++display:+none;++position:+absolute;++z-index:+9999;++padding:+12px+0;++width:+200px;++background-color:+#fff;++border:+solid+1px+#dfdfdf;++box-shadow:+1px+1px+2px+#cfcfcf;++}
.context-menu--active+{++display:+block;++}

.context-menu__items+{+list-style:+none;++margin:+0;++padding:+0;++}
.context-menu__item+{+display:+block;++margin-bottom:+4px;++}
.context-menu__item:last-child+{++margin-bottom:+0;++}
.context-menu__link+{++display:+block;++padding:+4px+12px;++color:+#0066aa;++text-decoration:+none;++}
.context-menu__link:hover+{++color:+#fff;++background-color:+#0066aa;++}
.context-menu__items+ul+{++position:+absolute;++white-space:+nowrap;++z-index:+1;++left:+-99999em;}
.context-menu__items+>+li:hover+>+ul+{++left:+auto;++padding-top:+5px++;++min-width:+100%25;++}
.context-menu__items+>+li+li+ul+{++border-left:1px+solid+#fff;}
.context-menu__items+>+li+li:hover+>+ul+{++left:+100%25;++top:+-1px;++}
.context-menu__item+ul+{+background-color:+#ffffff;+padding:+7px+11px;++list-style-type:+none;++text-decoration:+none;+margin-left:+40px;+}
.page-media+.context-menu__items+ul+li+{+display:+block;+}
/**************+For+Context+menu+***********/|284955|<link+href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"+rel="stylesheet"/>
<link+href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"+rel="stylesheet"/>
<body>



++++
++++<div+class="container">

++++++++<div+class="row">

++++++++++++<div+class="col-lg-12">
++++++++++++++++<h1+class="page-header">Thumbnail+Gallery+<small>(Right+click+to+see+the+context+menu)</small></h1>
++++++++++++</div>

++++++++++++<div+class="col-lg-3+col-md-4+col-xs-6+thumb">
++++++++++++++++<a+class="thumbnail"+href="#">
++++++++++++++++++++<img+class="img-responsive"+src="http://placehold.it/400x300"+alt="">
++++++++++++++++</a>
++++++++++++</div>
++++++++++++<div+class="col-lg-3+col-md-4+col-xs-6+thumb">
++++++++++++++++<a+class="thumbnail"+href="#">
++++++++++++++++++++<img+class="img-responsive"+src="http://placehold.it/400x300"+alt="">
++++++++++++++++</a>
++++++++++++</div>
++++++++++++<div+class="col-lg-3+col-md-4+col-xs-6+thumb">
++++++++++++++++<a+class="thumbnail"+href="#">
++++++++++++++++++++<img+class="img-responsive"+src="http://placehold.it/400x300"+alt="">
++++++++++++++++</a>
++++++++++++</div>
++++++++++++<div+class="col-lg-3+col-md-4+col-xs-6+thumb">
++++++++++++++++<a+class="thumbnail"+href="#">
++++++++++++++++++++<img+class="img-responsive"+src="http://placehold.it/400x300"+alt="">
++++++++++++++++</a>
++++++++++++</div>
++++++++++++<div+class="col-lg-3+col-md-4+col-xs-6+thumb">
++++++++++++++++<a+class="thumbnail"+href="#">
++++++++++++++++++++<img+class="img-responsive"+src="http://placehold.it/400x300"+alt="">
++++++++++++++++</a>
++++++++++++</div>
++++++++++++<div+class="col-lg-3+col-md-4+col-xs-6+thumb">
++++++++++++++++<a+class="thumbnail"+href="#">
++++++++++++++++++++<img+class="img-responsive"+src="http://placehold.it/400x300"+alt="">
++++++++++++++++</a>
++++++++++++</div>
++++++++++++<div+class="col-lg-3+col-md-4+col-xs-6+thumb">
++++++++++++++++<a+class="thumbnail"+href="#">
++++++++++++++++++++<img+class="img-responsive"+src="http://placehold.it/400x300"+alt="">
++++++++++++++++</a>
++++++++++++</div>
++++++++++++<div+class="col-lg-3+col-md-4+col-xs-6+thumb">
++++++++++++++++<a+class="thumbnail"+href="#">
++++++++++++++++++++<img+class="img-responsive"+src="http://placehold.it/400x300"+alt="">
++++++++++++++++</a>
++++++++++++</div>

++++++++</div>

++++++++<hr>


++++</div>
++++


++++
++++<nav+id="context-menu"+class="context-menu">
++++++++<ul+class="context-menu__items">
++++++++++++<li+class="context-menu__item">
++++++++++++++++<a+href="#"+class="context-menu__link"+data-action="Delete+This+Photo"><i+class="fa+fa-empire"></i>+Delete+This+Photo</a>
++++++++++++</li>
++++++++++++<li+class="context-menu__item">
++++++++++++++++<a+href="#"+class="context-menu__link"+data-action="Photo+Option+2"><i+class="fa+fa-envira"></i>+Photo+Option+2</a>
++++++++++++</li>
++++++++++++<li+class="context-menu__item">
++++++++++++++++<a+href="#"+class="context-menu__link"+data-action="Photo+Option+3"><i+class="fa+fa-first-order"></i>+Photo+Option+3</a>
++++++++++++</li>
++++++++++++<li+class="context-menu__item">
++++++++++++++++<a+href="#"+class="context-menu__link"+data-action="Photo+Option+4"><i+class="fa+fa-gitlab"></i>+Photo+Option+4</a>
++++++++++++</li>
++++++++++++<li+class="context-menu__item">
++++++++++++++++<a+href="#"+class="context-menu__link"+data-action="Photo+Option+5"><i+class="fa+fa-ioxhost"></i>+Photo+Option+5</a>
++++++++++++</li>
++++++++++++<li+class="context-menu__item">
++++++++++++++++<a+href="#"+class="context-menu__link"><i+class="fa+fa-arrow-right"></i>+Add+Photo+to</a>
++++++++++++++++<ul>
++++++++++++++++++++<li><a+href="#!"+class="context-menu__link"+data-action="album-one"><i+class="fa+fa-camera-retro"></i>+Album+One</a></li>
++++++++++++++++++++<li><a+href="#!"+class="context-menu__link"+data-action="album-two"><i+class="fa+fa-camera-retro"></i>+Album+Two</a></li>
++++++++++++++++++++<li><a+href="#!"+class="context-menu__link"+data-action="album-three"><i+class="fa+fa-camera-retro"></i>+Album+Three</a></li>
++++++++++++++++++++<li><a+href="#!"+class="context-menu__link"+data-action="album-four"><i+class="fa+fa-camera-retro"></i>+Album+Four</a></li>
++++++++++++++++</ul>
++++++++++++</li>
++++++++</ul>
++++</nav>

++++


</body>|284956|284957|entityMap|0|LINK|mutability|MUTABLE|url|https://robinhossain.github.io/right-click-context-menu/^0|R|O|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@$A|12|B|13|1|14]]|C|$]]|$1|D|3|E|5|6|7|15|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|16|8|@]|9|@]|C|$]]|$1|H|3|I|5|6|7|17|8|@]|9|@]|C|$]]|$1|J|3|K|5|L|7|18|8|@]|9|@]|C|$M|N]]|$1|O|3|P|5|L|7|19|8|@]|9|@]|C|$M|N]]|$1|Q|3|R|5|L|7|1A|8|@]|9|@]|C|$M|N]]|$1|S|3|I|5|6|7|1B|8|@]|9|@]|C|$]]|$1|T|3|-4|5|6|7|1C|8|@]|9|@]|C|$]]]|U|$V|$5|W|X|Y|C|$Z|10]]]]

<p>here is an example for right click context menu in javascript:
<a href="https://robinhossain.github.io/right-click-context-menu/" rel="nofollow noreferrer">Right Click Context Menu</a></p>

<p>Used raw javasScript Code for context menu functionality. Can you please check this, hope this will help you.</p>

<p>Live Code: </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>(function() {
  
  "use strict";


  /*********************************************** Context Menu Function Only ********************************/
  function clickInsideElement( e, className ) {
    var el = e.srcElement || e.target;
    if ( el.classList.contains(className) ) {
      return el;
    } else {
      while ( el = el.parentNode ) {
        if ( el.classList &amp;&amp; el.classList.contains(className) ) {
          return el;
        }
      }
    }
    return false;
  }

  function getPosition(e) {
    var posx = 0, posy = 0;
    if (!e) var e = window.event;
    if (e.pageX || e.pageY) {
      posx = e.pageX;
      posy = e.pageY;
    } else if (e.clientX || e.clientY) {
      posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
      posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }
    return {
      x: posx,
      y: posy
    }
  }

  // Your Menu Class Name
  var taskItemClassName = "thumb";
  var contextMenuClassName = "context-menu",contextMenuItemClassName = "context-menu__item",contextMenuLinkClassName = "context-menu__link", contextMenuActive = "context-menu--active";
  var taskItemInContext, clickCoords, clickCoordsX, clickCoordsY, menu = document.querySelector("#context-menu"), menuItems = menu.querySelectorAll(".context-menu__item");
  var menuState = 0, menuWidth, menuHeight, menuPosition, menuPositionX, menuPositionY, windowWidth, windowHeight;

  function initMenuFunction() {
    contextListener();
    clickListener();
    keyupListener();
    resizeListener();
  }

  /**
   * Listens for contextmenu events.
   */
  function contextListener() {
    document.addEventListener( "contextmenu", function(e) {
      taskItemInContext = clickInsideElement( e, taskItemClassName );

      if ( taskItemInContext ) {
        e.preventDefault();
        toggleMenuOn();
        positionMenu(e);
      } else {
        taskItemInContext = null;
        toggleMenuOff();
      }
    });
  }

  /**
   * Listens for click events.
   */
  function clickListener() {
    document.addEventListener( "click", function(e) {
      var clickeElIsLink = clickInsideElement( e, contextMenuLinkClassName );

      if ( clickeElIsLink ) {
        e.preventDefault();
        menuItemListener( clickeElIsLink );
      } else {
        var button = e.which || e.button;
        if ( button === 1 ) {
          toggleMenuOff();
        }
      }
    });
  }

  /**
   * Listens for keyup events.
   */
  function keyupListener() {
    window.onkeyup = function(e) {
      if ( e.keyCode === 27 ) {
        toggleMenuOff();
      }
    }
  }

  /**
   * Window resize event listener
   */
  function resizeListener() {
    window.onresize = function(e) {
      toggleMenuOff();
    };
  }

  /**
   * Turns the custom context menu on.
   */
  function toggleMenuOn() {
    if ( menuState !== 1 ) {
      menuState = 1;
      menu.classList.add( contextMenuActive );
    }
  }

  /**
   * Turns the custom context menu off.
   */
  function toggleMenuOff() {
    if ( menuState !== 0 ) {
      menuState = 0;
      menu.classList.remove( contextMenuActive );
    }
  }

  function positionMenu(e) {
    clickCoords = getPosition(e);
    clickCoordsX = clickCoords.x;
    clickCoordsY = clickCoords.y;
    menuWidth = menu.offsetWidth + 4;
    menuHeight = menu.offsetHeight + 4;

    windowWidth = window.innerWidth;
    windowHeight = window.innerHeight;

    if ( (windowWidth - clickCoordsX) &lt; menuWidth ) {
      menu.style.left = (windowWidth - menuWidth)-0 + "px";
    } else {
      menu.style.left = clickCoordsX-0 + "px";
    }

    // menu.style.top = clickCoordsY + "px";

    if ( Math.abs(windowHeight - clickCoordsY) &lt; menuHeight ) {
      menu.style.top = (windowHeight - menuHeight)-0 + "px";
    } else {
      menu.style.top = clickCoordsY-0 + "px";
    }
  }


  function menuItemListener( link ) {
    var menuSelectedPhotoId = taskItemInContext.getAttribute("data-id");
    console.log('Your Selected Photo: '+menuSelectedPhotoId)
    var moveToAlbumSelectedId = link.getAttribute("data-action");
    if(moveToAlbumSelectedId == 'remove'){
      console.log('You Clicked the remove button')
    }else if(moveToAlbumSelectedId &amp;&amp; moveToAlbumSelectedId.length &gt; 7){
      console.log('Clicked Album Name: '+moveToAlbumSelectedId);
    }
    toggleMenuOff();
  }
  initMenuFunction();

})();</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>/* For Body Padding and content */
body { padding-top: 70px; }
li a { text-decoration: none !important; }

/* Thumbnail only */
.thumb {
  margin-bottom: 30px;
}
.thumb:hover a, .thumb:active a, .thumb:focus a {
  border: 1px solid purple;
}

/************** For Context menu ***********/
/* context menu */
.context-menu {  display: none;  position: absolute;  z-index: 9999;  padding: 12px 0;  width: 200px;  background-color: #fff;  border: solid 1px #dfdfdf;  box-shadow: 1px 1px 2px #cfcfcf;  }
.context-menu--active {  display: block;  }

.context-menu__items { list-style: none;  margin: 0;  padding: 0;  }
.context-menu__item { display: block;  margin-bottom: 4px;  }
.context-menu__item:last-child {  margin-bottom: 0;  }
.context-menu__link {  display: block;  padding: 4px 12px;  color: #0066aa;  text-decoration: none;  }
.context-menu__link:hover {  color: #fff;  background-color: #0066aa;  }
.context-menu__items ul {  position: absolute;  white-space: nowrap;  z-index: 1;  left: -99999em;}
.context-menu__items &gt; li:hover &gt; ul {  left: auto;  padding-top: 5px  ;  min-width: 100%;  }
.context-menu__items &gt; li li ul {  border-left:1px solid #fff;}
.context-menu__items &gt; li li:hover &gt; ul {  left: 100%;  top: -1px;  }
.context-menu__item ul { background-color: #ffffff; padding: 7px 11px;  list-style-type: none;  text-decoration: none; margin-left: 40px; }
.page-media .context-menu__items ul li { display: block; }
/************** For Context menu ***********/</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/&gt;
&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
&lt;body&gt;



    &lt;!-- Page Content --&gt;
    &lt;div class="container"&gt;

        &lt;div class="row"&gt;

            &lt;div class="col-lg-12"&gt;
                &lt;h1 class="page-header"&gt;Thumbnail Gallery &lt;small&gt;(Right click to see the context menu)&lt;/small&gt;&lt;/h1&gt;
            &lt;/div&gt;

            &lt;div class="col-lg-3 col-md-4 col-xs-6 thumb"&gt;
                &lt;a class="thumbnail" href="#"&gt;
                    &lt;img class="img-responsive" src="http://placehold.it/400x300" alt=""&gt;
                &lt;/a&gt;
            &lt;/div&gt;
            &lt;div class="col-lg-3 col-md-4 col-xs-6 thumb"&gt;
                &lt;a class="thumbnail" href="#"&gt;
                    &lt;img class="img-responsive" src="http://placehold.it/400x300" alt=""&gt;
                &lt;/a&gt;
            &lt;/div&gt;
            &lt;div class="col-lg-3 col-md-4 col-xs-6 thumb"&gt;
                &lt;a class="thumbnail" href="#"&gt;
                    &lt;img class="img-responsive" src="http://placehold.it/400x300" alt=""&gt;
                &lt;/a&gt;
            &lt;/div&gt;
            &lt;div class="col-lg-3 col-md-4 col-xs-6 thumb"&gt;
                &lt;a class="thumbnail" href="#"&gt;
                    &lt;img class="img-responsive" src="http://placehold.it/400x300" alt=""&gt;
                &lt;/a&gt;
            &lt;/div&gt;
            &lt;div class="col-lg-3 col-md-4 col-xs-6 thumb"&gt;
                &lt;a class="thumbnail" href="#"&gt;
                    &lt;img class="img-responsive" src="http://placehold.it/400x300" alt=""&gt;
                &lt;/a&gt;
            &lt;/div&gt;
            &lt;div class="col-lg-3 col-md-4 col-xs-6 thumb"&gt;
                &lt;a class="thumbnail" href="#"&gt;
                    &lt;img class="img-responsive" src="http://placehold.it/400x300" alt=""&gt;
                &lt;/a&gt;
            &lt;/div&gt;
            &lt;div class="col-lg-3 col-md-4 col-xs-6 thumb"&gt;
                &lt;a class="thumbnail" href="#"&gt;
                    &lt;img class="img-responsive" src="http://placehold.it/400x300" alt=""&gt;
                &lt;/a&gt;
            &lt;/div&gt;
            &lt;div class="col-lg-3 col-md-4 col-xs-6 thumb"&gt;
                &lt;a class="thumbnail" href="#"&gt;
                    &lt;img class="img-responsive" src="http://placehold.it/400x300" alt=""&gt;
                &lt;/a&gt;
            &lt;/div&gt;

        &lt;/div&gt;

        &lt;hr&gt;


    &lt;/div&gt;
    &lt;!-- /.container --&gt;


    &lt;!-- / The Context Menu --&gt;
    &lt;nav id="context-menu" class="context-menu"&gt;
        &lt;ul class="context-menu__items"&gt;
            &lt;li class="context-menu__item"&gt;
                &lt;a href="#" class="context-menu__link" data-action="Delete This Photo"&gt;&lt;i class="fa fa-empire"&gt;&lt;/i&gt; Delete This Photo&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="context-menu__item"&gt;
                &lt;a href="#" class="context-menu__link" data-action="Photo Option 2"&gt;&lt;i class="fa fa-envira"&gt;&lt;/i&gt; Photo Option 2&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="context-menu__item"&gt;
                &lt;a href="#" class="context-menu__link" data-action="Photo Option 3"&gt;&lt;i class="fa fa-first-order"&gt;&lt;/i&gt; Photo Option 3&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="context-menu__item"&gt;
                &lt;a href="#" class="context-menu__link" data-action="Photo Option 4"&gt;&lt;i class="fa fa-gitlab"&gt;&lt;/i&gt; Photo Option 4&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="context-menu__item"&gt;
                &lt;a href="#" class="context-menu__link" data-action="Photo Option 5"&gt;&lt;i class="fa fa-ioxhost"&gt;&lt;/i&gt; Photo Option 5&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="context-menu__item"&gt;
                &lt;a href="#" class="context-menu__link"&gt;&lt;i class="fa fa-arrow-right"&gt;&lt;/i&gt; Add Photo to&lt;/a&gt;
                &lt;ul&gt;
                    &lt;li&gt;&lt;a href="#!" class="context-menu__link" data-action="album-one"&gt;&lt;i class="fa fa-camera-retro"&gt;&lt;/i&gt; Album One&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#!" class="context-menu__link" data-action="album-two"&gt;&lt;i class="fa fa-camera-retro"&gt;&lt;/i&gt; Album Two&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#!" class="context-menu__link" data-action="album-three"&gt;&lt;i class="fa fa-camera-retro"&gt;&lt;/i&gt; Album Three&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#!" class="context-menu__link" data-action="album-four"&gt;&lt;i class="fa fa-camera-retro"&gt;&lt;/i&gt; Album Four&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/nav&gt;

    &lt;!-- End # Context Menu --&gt;


&lt;/body&gt;</code></pre>
</div>
</div>
</p>


blocks|key|287223|text|我知道这也是相当古老的。我最近需要创建一个上下文菜单，我将其注入到其他站点中，这些站点根据单击的元素具有不同的属性。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|287224|这是相当艰难的，而且可能有更好的方法来实现这一点。它使用jQuery上下文菜单库Located+Here|offset|length|287225|我喜欢创建它，尽管你们可能会用到它。|287226|这是fiddle。我希望它能帮助外面的人。|287227|$(function()+{
++function+createSomeMenu()+{
++++var+all_array+=+'{';
++++var+x+=+event.clientX,
++++++y+=+event.clientY,
++++++elementMouseIsOver+=+document.elementFromPoint(x,+y);
++++if+(elementMouseIsOver.closest('a'))+{
++++++all_array+%2B=+'"Link-Fold":+{"name":+"Link",+"icon":+"fa-external-link",+"items":+{"fold2-key1":+{"name":+"Open+Site+in+New+Tab"},+"fold2-key2":+{"name":+"Open+Site+in+Split+Tab"},+"fold2-key3":+{"name":+"Copy+URL"}}},';
++++}
++++if+(elementMouseIsOver.closest('img'))+{
++++++all_array+%2B=+'"Image-Fold":+{"name":+"Image","icon":+"fa-picture-o","items":+{"fold1-key1":+{"name":"Download+Image"},"fold1-key2":+{"name":+"Copy+Image+Location"},"fold1-key3":+{"name":+"Go+To+Image"}}},';
++++}
++++all_array+%2B=+'"copy":+{"name":+"Copy","icon":+"copy"},"paste":+{"name":+"Paste","icon":+"paste"},"edit":+{"name":+"Edit+HTML","icon":+"fa-code"}}';
++++return+JSON.parse(all_array);
++}

++//+setup+context+menu
++$.contextMenu({
++++selector:+'body',
++++build:+function($trigger,+e)+{
++++++return+{
++++++++callback:+function(key,+options)+{
++++++++++var+m+=+"clicked:+"+%2B+key;
++++++++++console.log(m);
++++++++},
++++++++items:+createSomeMenu()
++++++};
++++}
++});
});|code-block|syntax|javascript|287228|entityMap|0|LINK|mutability|MUTABLE|url|https://swisnl.github.io/jQuery-contextMenu//|1|https://jsfiddle.net/Cody0913/16bsLf3u/^0|0|14|C|0|0|0|2|6|1|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@$D|10|E|11|1|12]]|A|$]]|$1|F|3|G|5|6|7|13|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|14|8|@]|9|@$D|15|E|16|1|17]]|A|$]]|$1|J|3|K|5|L|7|18|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]|W|$5|R|S|T|A|$U|X]]]]

<p>I know that this is rather old also. I recently had a need to create a context menu that I inject into other sites that have different properties based n the element clicked.</p>

<p>It's rather rough, and there are probable better ways to achieve this.
It uses the jQuery Context menu Library <a href="https://swisnl.github.io/jQuery-contextMenu//" rel="nofollow noreferrer">Located Here</a></p>

<p>I enjoyed creating it and though that you guys might have some use out of it.</p>

<p>Here is the <a href="https://jsfiddle.net/Cody0913/16bsLf3u/" rel="nofollow noreferrer">fiddle</a>. I hope that it can hopefully help someone out there.</p>

<pre><code>$(function() {
  function createSomeMenu() {
    var all_array = '{';
    var x = event.clientX,
      y = event.clientY,
      elementMouseIsOver = document.elementFromPoint(x, y);
    if (elementMouseIsOver.closest('a')) {
      all_array += '"Link-Fold": {"name": "Link", "icon": "fa-external-link", "items": {"fold2-key1": {"name": "Open Site in New Tab"}, "fold2-key2": {"name": "Open Site in Split Tab"}, "fold2-key3": {"name": "Copy URL"}}},';
    }
    if (elementMouseIsOver.closest('img')) {
      all_array += '"Image-Fold": {"name": "Image","icon": "fa-picture-o","items": {"fold1-key1": {"name":"Download Image"},"fold1-key2": {"name": "Copy Image Location"},"fold1-key3": {"name": "Go To Image"}}},';
    }
    all_array += '"copy": {"name": "Copy","icon": "copy"},"paste": {"name": "Paste","icon": "paste"},"edit": {"name": "Edit HTML","icon": "fa-code"}}';
    return JSON.parse(all_array);
  }

  // setup context menu
  $.contextMenu({
    selector: 'body',
    build: function($trigger, e) {
      return {
        callback: function(key, options) {
          var m = "clicked: " + key;
          console.log(m);
        },
        items: createSomeMenu()
      };
    }
  });
});
</code></pre>


blocks|key|3216907|text|我使用bootstrap有一个很好的简单的实现，如下所示。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3216908|<select+class="custom-select"+id="list"+multiple></select>

<div+class="dropdown-menu"+id="menu-right-click"+style=>
++++<h6+class="dropdown-header">Actions</h6>
++++<a+class="dropdown-item"+href=""+onclick="option1();">Option+1</a>
++++<a+class="dropdown-item"+href=""+onclick="option2();">Option+2</a>
</div>

<script>
++++$("#menu-right-click").hide();

++++$(document).on("contextmenu",+"#list",+function+(e)+{
++++++++$("#menu-right-click")
++++++++++++.css({
++++++++++++++++position:+'absolute',
++++++++++++++++left:+e.pageX,
++++++++++++++++top:+e.pageY,
++++++++++++++++display:+'block'
++++++++++++})
++++++++return+false;
++++});

++++function+option1()+{
++++++++//+something+you+want...
++++++++$("#menu-right-click").hide();
++++}

++++function+option2()+{
++++++++//+something+else+
++++++++$("#menu-right-click").hide();
++++}
</script>|code-block|syntax|javascript|3216909|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I have a nice and easy implementation using bootstrap as follows.</p>
<pre><code>&lt;select class=&quot;custom-select&quot; id=&quot;list&quot; multiple&gt;&lt;/select&gt;

&lt;div class=&quot;dropdown-menu&quot; id=&quot;menu-right-click&quot; style=&gt;
    &lt;h6 class=&quot;dropdown-header&quot;&gt;Actions&lt;/h6&gt;
    &lt;a class=&quot;dropdown-item&quot; href=&quot;&quot; onclick=&quot;option1();&quot;&gt;Option 1&lt;/a&gt;
    &lt;a class=&quot;dropdown-item&quot; href=&quot;&quot; onclick=&quot;option2();&quot;&gt;Option 2&lt;/a&gt;
&lt;/div&gt;

&lt;script&gt;
    $(&quot;#menu-right-click&quot;).hide();

    $(document).on(&quot;contextmenu&quot;, &quot;#list&quot;, function (e) {
        $(&quot;#menu-right-click&quot;)
            .css({
                position: 'absolute',
                left: e.pageX,
                top: e.pageY,
                display: 'block'
            })
        return false;
    });

    function option1() {
        // something you want...
        $(&quot;#menu-right-click&quot;).hide();
    }

    function option2() {
        // something else 
        $(&quot;#menu-right-click&quot;).hide();
    }
&lt;/script&gt;
</code></pre>


blocks|key|284980|text|Simple+One|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|284981|284982|右键单击文档中的任意位置时显示上下文菜单|ordered-list-item|284983|避免上下文菜单在内部单击上下文菜单时隐藏|284984|按鼠标左键关闭上下文菜单|284985|284986|注意:不要使用display:none，而是使用opacity来隐藏和显示|284987|​|284988|var+menu=+document.querySelector('.context_menu');
document.addEventListener("contextmenu",+function(e)+{++++++
++++++++++++e.preventDefault();++
++++++++++++menu.style.position+=+'absolute';
++++++++++++menu.style.left+=+e.pageX+%2B+'px';
++++++++++++menu.style.top+=+e.pageY+%2B+'px';++++++++
+++++++++++++menu.style.opacity+=+1;
++++++++});
+++++++
++document.addEventListener("click",+function(e){
++if(e.target.closest('.context_menu'))
++return;
++++++menu.style.opacity+=+0;
++});|code-block|syntax|javascript|284989|.context_menu{

width:70px;
background:lightgrey;
padding:5px;
+opacity+:0;
}
.context_menu+div{
margin:5px;
background:grey;

}
.context_menu+div:hover{
margin:5px;
background:red;
+++cursor:pointer;

}|284990|<div+class="context_menu">
<div>menu+1</div>
<div>menu+2</div>
</div>|284991|284992|额外的css|284993|284994|var+menu=+document.querySelector('.context_menu');
document.addEventListener("contextmenu",+function(e)+{++++++
++++++++++++e.preventDefault();++
++++++++++++menu.style.position+=+'absolute';
++++++++++++menu.style.left+=+e.pageX+%2B+'px';
++++++++++++menu.style.top+=+e.pageY+%2B+'px';++++++++
+++++++++++++menu.style.opacity+=+1;
++++++++});
+++++++
++document.addEventListener("click",+function(e){
++if(e.target.closest('.context_menu'))
++return;
++++++menu.style.opacity+=+0;
++});|284995|.context_menu{

width:120px;
background:white;
border:1px+solid+lightgrey;

+opacity+:0;
}
.context_menu+div{
padding:5px;
padding-left:15px;
margin:5px+2px;
border-bottom:1px+solid+lightgrey;
}
.context_menu+div:last-child+{
border:none;
}
.context_menu+div:hover{

background:lightgrey;
+++cursor:pointer;

}|284996|<div+class="context_menu">
<div>menu+1</div>
<div>menu+2</div>
<div>menu+3</div>
<div>menu+4</div>
</div>|284997|284998|entityMap^0|0|A|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1E|8|@$9|1F|A|1G|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|1H|8|@]|D|@]|E|$]]|$1|G|3|H|5|I|7|1I|8|@]|D|@]|E|$]]|$1|J|3|K|5|I|7|1J|8|@]|D|@]|E|$]]|$1|L|3|M|5|I|7|1K|8|@]|D|@]|E|$]]|$1|N|3|-4|5|6|7|1L|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|1M|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1N|8|@]|D|@]|E|$]]|$1|S|3|T|5|U|7|1O|8|@]|D|@]|E|$V|W]]|$1|X|3|Y|5|U|7|1P|8|@]|D|@]|E|$V|W]]|$1|Z|3|10|5|U|7|1Q|8|@]|D|@]|E|$V|W]]|$1|11|3|R|5|6|7|1R|8|@]|D|@]|E|$]]|$1|12|3|13|5|6|7|1S|8|@]|D|@]|E|$]]|$1|14|3|R|5|6|7|1T|8|@]|D|@]|E|$]]|$1|15|3|16|5|U|7|1U|8|@]|D|@]|E|$V|W]]|$1|17|3|18|5|U|7|1V|8|@]|D|@]|E|$V|W]]|$1|19|3|1A|5|U|7|1W|8|@]|D|@]|E|$V|W]]|$1|1B|3|R|5|6|7|1X|8|@]|D|@]|E|$]]|$1|1C|3|-4|5|6|7|1Y|8|@]|D|@]|E|$]]]|1D|$]]

<p><strong>Simple One</strong></p>
<ol>
<li>show context menu when right click anywhere in document</li>
<li>avoid context menu hide when click inside context menu</li>
<li>close context menu when press left mouse button</li>
</ol>
<p>Note:
dont use display:none instead use opacity to hide and show</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var menu= document.querySelector('.context_menu');
document.addEventListener("contextmenu", function(e) {      
            e.preventDefault();  
            menu.style.position = 'absolute';
            menu.style.left = e.pageX + 'px';
            menu.style.top = e.pageY + 'px';        
             menu.style.opacity = 1;
        });
       
  document.addEventListener("click", function(e){
  if(e.target.closest('.context_menu'))
  return;
      menu.style.opacity = 0;
  });</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.context_menu{

width:70px;
background:lightgrey;
padding:5px;
 opacity :0;
}
.context_menu div{
margin:5px;
background:grey;

}
.context_menu div:hover{
margin:5px;
background:red;
   cursor:pointer;

}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="context_menu"&gt;
&lt;div&gt;menu 1&lt;/div&gt;
&lt;div&gt;menu 2&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>
<p>extra css</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var menu= document.querySelector('.context_menu');
document.addEventListener("contextmenu", function(e) {      
            e.preventDefault();  
            menu.style.position = 'absolute';
            menu.style.left = e.pageX + 'px';
            menu.style.top = e.pageY + 'px';        
             menu.style.opacity = 1;
        });
       
  document.addEventListener("click", function(e){
  if(e.target.closest('.context_menu'))
  return;
      menu.style.opacity = 0;
  });</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.context_menu{

width:120px;
background:white;
border:1px solid lightgrey;

 opacity :0;
}
.context_menu div{
padding:5px;
padding-left:15px;
margin:5px 2px;
border-bottom:1px solid lightgrey;
}
.context_menu div:last-child {
border:none;
}
.context_menu div:hover{

background:lightgrey;
   cursor:pointer;

}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="context_menu"&gt;
&lt;div&gt;menu 1&lt;/div&gt;
&lt;div&gt;menu 2&lt;/div&gt;
&lt;div&gt;menu 3&lt;/div&gt;
&lt;div&gt;menu 4&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


<p>I've a few websites like google-docs and map-quest that have custom drop down menus when you right-click. Somehow they override the browser's behavior of drop-down menu, and I'm now sure exactly how they do it. I found a <a href="http://plugins.jquery.com/plugin-tags/context-menu" rel="noreferrer">jQuery plugin</a> that does this, but I'm still curious about a few things:</p>

<ul>
<li>How does this work? Is the browser's drop-down menu actually being overridden, or is the effect just simulated? If so, how?</li>
<li>What does the plugin abstract away? What's going on behind the scenes?</li>
<li>Is this the only way of achieving this effect?</li>
</ul>

<p><img src="https://i.stack.imgur.com/5Tn04.png" alt="custom context menu image"></p>

<p><strong><a href="http://www.javascripttoolbox.com/lib/contextmenu/" rel="noreferrer">See several custom-context menus in action</a></strong></p>


Making custom right-click context menus for my web-app

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有一些像google-docs和map-quest这样的网站，当你点击右键时，它们都有自定义的下拉菜单。不知何故，它们覆盖了浏览器的下拉菜单行为，我现在确定它们是如何做到这一点的。我找到了一个可以做到这一点的，但我仍然对一些事情感到好奇：这是如何工作的？浏览器的下拉菜单是否真的被覆盖了，或者只是模拟了一下效果？如果是...

问为我的web应用程序创建自定义右键单击上下文菜单
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为我的web应用程序创建自定义右键单击上下文菜单EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为我的web应用程序创建自定义右键单击上下文菜单
EN