Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>It is simple to prevent the context menu with html:</p> <pre><code>&lt;body oncontextmenu="return false;"&gt; </code></pre> <p>or with javascript (jquery):</p> <pre><code>$(document).bind(“contextmenu”, function (e) { e.preventDefault(); }); </code></pre> <p>Or, if you want to show a custom html context menu using javascript...</p> <p>HTML:</p> <pre><code>&lt;div id="context-menu"&gt; &lt;ul&gt; &lt;li&gt;Item1&lt;/li&gt; &lt;li&gt;Item2&lt;/li&gt; &lt;li&gt;Item3&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id="op"&gt;Right click anywhere!&lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code>#context-menu { display: none; position: fixed; border: 1px solid #ddd; background: white; box-shadow: 2px 2px 1px grey; } #context-menu ul { list-style: none; padding: 0; margin: 0; } #context-menu li { width:150px; padding: 5px 8px; } #context-menu li:hover { background:#eaeaea; cursor:pointer; } </code></pre> <p>JS:</p> <pre><code>function startFocusOut() { $(document).on("click", function () { $("#context-menu").fadeOut(20); // To hide the context menu $(document).off("click"); }); } $(function(){ $(document).bind("contextmenu", function (e) { e.preventDefault(); // To prevent the default context menu. $("#context-menu").css("left", e.pageX); // position with cursor $("#context-menu").css("top", e.pageY); $("#context-menu").fadeIn(20, startFocusOut()); // show the menu }); $("#context-menu li").click(function () { $("#op").text("You have selected " + $(this).text()); // Performing the selected function. }); }); </code></pre> <p>Jsfiddle: <a href="http://jsfiddle.net/VRy93/" rel="noreferrer">http://jsfiddle.net/VRy93/</a></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload