From 5ccc2e3b40d293b1eed62b011e2ffc5b33a7bb49 Mon Sep 17 00:00:00 2001
From: Rodney Rehm <mail+github@rodneyrehm.de>
Date: Tue, 13 Nov 2012 22:42:06 +0100
Subject: [PATCH] Fixing Issue #88 - Creating contextMenu on DOM Element
 (removed obsolete Firefox 12 hack in the process)

---
 demo.html                          |   1 +
 demo/accesskeys.html               |   1 +
 demo/async-create.html             |   1 +
 demo/callback.html                 |   1 +
 demo/custom-command.html           |   1 +
 demo/disabled-callback.html        |   1 +
 demo/disabled-changing.html        |   1 +
 demo/disabled-menu.html            |   1 +
 demo/disabled.html                 |   1 +
 demo/dynamic-create.html           |   1 +
 demo/html5-import.html             |   1 +
 demo/html5-polyfill-firefox8.html  |   1 +
 demo/html5-polyfill.html           |   1 +
 demo/input.html                    |   1 +
 demo/keeping-contextmenu-open.html |   1 +
 demo/menu-title.html               |   1 +
 demo/on-dom-element.html           | 136 +++++++++++++++++++++++++++++
 demo/sub-menus.html                |   1 +
 demo/trigger-custom.html           |   1 +
 demo/trigger-hover-autohide.html   |   1 +
 demo/trigger-hover.html            |   1 +
 demo/trigger-left-click.html       |   1 +
 src/jquery.contextMenu.js          | 117 ++++++++++++++-----------
 23 files changed, 222 insertions(+), 52 deletions(-)
 create mode 100755 demo/on-dom-element.html

diff --git a/demo.html b/demo.html
index b4caec0f..4c6d3029 100755
--- a/demo.html
+++ b/demo.html
@@ -82,6 +82,7 @@ <h3 id="html">Example HTML: Simple Context Menu</h3>
     <h2>jQuery Context Menu Demo Gallery</h2>
     <ul id="demo-list">
         <li class="current"><a href="demo.html">Simple Context Menu</a></li>
+        <li><a href="demo/on-dom-element.html">Context Menu on DOM Element</a></li>
         <li><a href="demo/dynamic.html">Adding new Context Menu Triggers</a></li>
         <li><a href="demo/dynamic-create.html">Create Context Menu on demand</a></li>
         <li><a href="demo/async-create.html">Create Context Menu (asynchronous)</a></li>
diff --git a/demo/accesskeys.html b/demo/accesskeys.html
index 61d3c2fe..450abf08 100755
--- a/demo/accesskeys.html
+++ b/demo/accesskeys.html
@@ -79,6 +79,7 @@ <h3 id="html">Example HTML: Accesskeys</h3>
     <h2>jQuery Context Menu Demo Gallery</h2>
     <ul id="demo-list">
         <li><a href="../demo.html">Simple Context Menu</a></li>
+        <li><a href="on-dom-element.html">Context Menu on DOM Element</a></li>
         <li><a href="dynamic.html">Adding new Context Menu Triggers</a></li>
         <li><a href="dynamic-create.html">Create Context Menu on demand</a></li>
         <li><a href="async-create.html">Create Context Menu (asynchronous)</a></li>
diff --git a/demo/async-create.html b/demo/async-create.html
index 854d875d..6c15316b 100755
--- a/demo/async-create.html
+++ b/demo/async-create.html
@@ -99,6 +99,7 @@ <h3 id="html">Example HTML: Asynchronous</h3>
     <h2>jQuery Context Menu Demo Gallery</h2>
     <ul id="demo-list">
         <li><a href="../demo.html">Simple Context Menu</a></li>
+        <li><a href="on-dom-element.html">Context Menu on DOM Element</a></li>
         <li><a href="dynamic.html">Adding new Context Menu Triggers</a></li>
         <li><a href="dynamic-create.html">Create Context Menu on demand</a></li>
         <li class="current"><a href="async-create.html">Create Context Menu (asynchronous)</a></li>
diff --git a/demo/callback.html b/demo/callback.html
index 424438e1..694ddebb 100755
--- a/demo/callback.html
+++ b/demo/callback.html
@@ -86,6 +86,7 @@ <h3 id="html">Example HTML: Command's action (callbacks)</h3>
     <h2>jQuery Context Menu Demo Gallery</h2>
     <ul id="demo-list">
         <li><a href="../demo.html">Simple Context Menu</a></li>
+        <li><a href="on-dom-element.html">Context Menu on DOM Element</a></li>
         <li><a href="dynamic.html">Adding new Context Menu Triggers</a></li>
         <li><a href="dynamic-create.html">Create Context Menu on demand</a></li>
         <li><a href="async-create.html">Create Context Menu (asynchronous)</a></li>
diff --git a/demo/custom-command.html b/demo/custom-command.html
index b3ee1706..0bdaef3b 100755
--- a/demo/custom-command.html
+++ b/demo/custom-command.html
@@ -131,6 +131,7 @@ <h3 id="html">Example HTML: Custom Command Types</h3>
     <h2>jQuery Context Menu Demo Gallery</h2>
     <ul id="demo-list">
         <li><a href="../demo.html">Simple Context Menu</a></li>
+        <li><a href="on-dom-element.html">Context Menu on DOM Element</a></li>
         <li><a href="dynamic.html">Adding new Context Menu Triggers</a></li>
         <li><a href="dynamic-create.html">Create Context Menu on demand</a></li>
         <li><a href="async-create.html">Create Context Menu (asynchronous)</a></li>
diff --git a/demo/disabled-callback.html b/demo/disabled-callback.html
index e0ae2fa0..fb44c851 100755
--- a/demo/disabled-callback.html
+++ b/demo/disabled-callback.html
@@ -80,6 +80,7 @@ <h3 id="html">Example HTML: Disabled Callback</h3>
     <h2>jQuery Context Menu Demo Gallery</h2>
     <ul id="demo-list">
         <li><a href="../demo.html">Simple Context Menu</a></li>
+        <li><a href="on-dom-element.html">Context Menu on DOM Element</a></li>
         <li><a href="dynamic.html">Adding new Context Menu Triggers</a></li>
         <li><a href="dynamic-create.html">Create Context Menu on demand</a></li>
         <li><a href="async-create.html">Create Context Menu (asynchronous)</a></li>
diff --git a/demo/disabled-changing.html b/demo/disabled-changing.html
index e3d2d591..513f8298 100755
--- a/demo/disabled-changing.html
+++ b/demo/disabled-changing.html
@@ -87,6 +87,7 @@ <h3 id="html">Example HTML: Changing Disabled</h3>
     <h2>jQuery Context Menu Demo Gallery</h2>
     <ul id="demo-list">
         <li><a href="../demo.html">Simple Context Menu</a></li>
+        <li><a href="on-dom-element.html">Context Menu on DOM Element</a></li>
         <li><a href="dynamic.html">Adding new Context Menu Triggers</a></li>
         <li><a href="dynamic-create.html">Create Context Menu on demand</a></li>
         <li><a href="async-create.html">Create Context Menu (asynchronous)</a></li>
diff --git a/demo/disabled-menu.html b/demo/disabled-menu.html
index e0dad436..5bd6315a 100755
--- a/demo/disabled-menu.html
+++ b/demo/disabled-menu.html
@@ -92,6 +92,7 @@ <h3 id="html">Example HTML: Disabled Context Menu</h3>
     <h2>jQuery Context Menu Demo Gallery</h2>
     <ul id="demo-list">
         <li><a href="../demo.html">Simple Context Menu</a></li>
+        <li><a href="on-dom-element.html">Context Menu on DOM Element</a></li>
         <li><a href="dynamic.html">Adding new Context Menu Triggers</a></li>
         <li><a href="dynamic-create.html">Create Context Menu on demand</a></li>
         <li><a href="async-create.html">Create Context Menu (asynchronous)</a></li>
diff --git a/demo/disabled.html b/demo/disabled.html
index b3f816bb..0dc1c44a 100755
--- a/demo/disabled.html
+++ b/demo/disabled.html
@@ -72,6 +72,7 @@ <h3 id="html">Example HTML: Disabled Command</h3>
     <h2>jQuery Context Menu Demo Gallery</h2>
     <ul id="demo-list">
         <li><a href="../demo.html">Simple Context Menu</a></li>
+        <li><a href="on-dom-element.html">Context Menu on DOM Element</a></li>
         <li><a href="dynamic.html">Adding new Context Menu Triggers</a></li>
         <li><a href="dynamic-create.html">Create Context Menu on demand</a></li>
         <li><a href="async-create.html">Create Context Menu (asynchronous)</a></li>
diff --git a/demo/dynamic-create.html b/demo/dynamic-create.html
index 3b0aede6..23c7580d 100755
--- a/demo/dynamic-create.html
+++ b/demo/dynamic-create.html
@@ -85,6 +85,7 @@ <h3 id="html">Example HTML: Dynamic on-demand Menu</h3>
     <h2>jQuery Context Menu Demo Gallery</h2>
     <ul id="demo-list">
         <li><a href="../demo.html">Simple Context Menu</a></li>
+        <li><a href="on-dom-element.html">Context Menu on DOM Element</a></li>
         <li><a href="dynamic.html">Adding new Context Menu Triggers</a></li>
         <li class="current"><a href="dynamic-create.html">Create Context Menu on demand</a></li>
         <li><a href="async-create.html">Create Context Menu (asynchronous)</a></li>
diff --git a/demo/html5-import.html b/demo/html5-import.html
index 8b42cddd..97bda4ec 100755
--- a/demo/html5-import.html
+++ b/demo/html5-import.html
@@ -75,6 +75,7 @@ <h3 id="html">Example HTML: Importing HTML5 &lt;menu type=&quot;context&quot;&gt
     <h2>jQuery Context Menu Demo Gallery</h2>
     <ul id="demo-list">
         <li><a href="../demo.html">Simple Context Menu</a></li>
+        <li><a href="on-dom-element.html">Context Menu on DOM Element</a></li>
         <li><a href="dynamic.html">Adding new Context Menu Triggers</a></li>
         <li><a href="dynamic-create.html">Create Context Menu on demand</a></li>
         <li><a href="async-create.html">Create Context Menu (asynchronous)</a></li>
diff --git a/demo/html5-polyfill-firefox8.html b/demo/html5-polyfill-firefox8.html
index 496a242b..9ad34845 100755
--- a/demo/html5-polyfill-firefox8.html
+++ b/demo/html5-polyfill-firefox8.html
@@ -79,6 +79,7 @@ <h3 id="html">Example HTML: HTML5 Polyfill (Firefox 8)</h3>
     <h2>jQuery Context Menu Demo Gallery</h2>
     <ul id="demo-list">
         <li><a href="../demo.html">Simple Context Menu</a></li>
+        <li><a href="on-dom-element.html">Context Menu on DOM Element</a></li>
         <li><a href="dynamic.html">Adding new Context Menu Triggers</a></li>
         <li><a href="dynamic-create.html">Create Context Menu on demand</a></li>
         <li><a href="async-create.html">Create Context Menu (asynchronous)</a></li>
diff --git a/demo/html5-polyfill.html b/demo/html5-polyfill.html
index cabcb642..35f72962 100755
--- a/demo/html5-polyfill.html
+++ b/demo/html5-polyfill.html
@@ -73,6 +73,7 @@ <h3 id="html">Example HTML: HTML5 Polyfill</h3>
     <h2>jQuery Context Menu Demo Gallery</h2>
     <ul id="demo-list">
         <li><a href="../demo.html">Simple Context Menu</a></li>
+        <li><a href="on-dom-element.html">Context Menu on DOM Element</a></li>
         <li><a href="dynamic.html">Adding new Context Menu Triggers</a></li>
         <li><a href="dynamic-create.html">Create Context Menu on demand</a></li>
         <li><a href="async-create.html">Create Context Menu (asynchronous)</a></li>
diff --git a/demo/input.html b/demo/input.html
index 84877f65..b2ca8443 100755
--- a/demo/input.html
+++ b/demo/input.html
@@ -157,6 +157,7 @@ <h3 id="html">Example HTML: Input Commands</h3>
     <h2>jQuery Context Menu Demo Gallery</h2>
     <ul id="demo-list">
         <li><a href="../demo.html">Simple Context Menu</a></li>
+        <li><a href="on-dom-element.html">Context Menu on DOM Element</a></li>
         <li><a href="dynamic.html">Adding new Context Menu Triggers</a></li>
         <li><a href="dynamic-create.html">Create Context Menu on demand</a></li>
         <li><a href="async-create.html">Create Context Menu (asynchronous)</a></li>
diff --git a/demo/keeping-contextmenu-open.html b/demo/keeping-contextmenu-open.html
index 5901a721..ae571632 100755
--- a/demo/keeping-contextmenu-open.html
+++ b/demo/keeping-contextmenu-open.html
@@ -81,6 +81,7 @@ <h3 id="html">Example HTML: Keeping the Menu visible</h3>
     <h2>jQuery Context Menu Demo Gallery</h2>
     <ul id="demo-list">
         <li><a href="../demo.html">Simple Context Menu</a></li>
+        <li><a href="on-dom-element.html">Context Menu on DOM Element</a></li>
         <li><a href="dynamic.html">Adding new Context Menu Triggers</a></li>
         <li><a href="dynamic-create.html">Create Context Menu on demand</a></li>
         <li><a href="async-create.html">Create Context Menu (asynchronous)</a></li>
diff --git a/demo/menu-title.html b/demo/menu-title.html
index a28e30e9..d81c2c31 100755
--- a/demo/menu-title.html
+++ b/demo/menu-title.html
@@ -167,6 +167,7 @@ <h3 id="html">Example HTML: Menu Title</h3>
     <h2>jQuery Context Menu Demo Gallery</h2>
     <ul id="demo-list">
         <li><a href="../demo.html">Simple Context Menu</a></li>
+        <li><a href="on-dom-element.html">Context Menu on DOM Element</a></li>
         <li><a href="dynamic.html">Adding new Context Menu Triggers</a></li>
         <li><a href="dynamic-create.html">Create Context Menu on demand</a></li>
         <li><a href="async-create.html">Create Context Menu (asynchronous)</a></li>
diff --git a/demo/on-dom-element.html b/demo/on-dom-element.html
new file mode 100755
index 00000000..09a7fb78
--- /dev/null
+++ b/demo/on-dom-element.html
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <title>Context Menu on DOM Element Demo - jQuery contextMenu Plugin</title>
+    <meta name="description" content="simple contextMenu generator for interactive web applications based on jQuery" />
+
+    <script src="../jquery-1.8.2.min.js" type="text/javascript"></script>
+    <script src="../src/jquery.ui.position.js" type="text/javascript"></script>
+    <script src="../src/jquery.contextMenu.js" type="text/javascript"></script>
+    <script src="../prettify/prettify.js" type="text/javascript"></script>
+    <script src="../screen.js" type="text/javascript"></script>
+
+    <link href="../src/jquery.contextMenu.css" rel="stylesheet" type="text/css" />
+    <link href="../screen.css" rel="stylesheet" type="text/css" />
+    <link href="../prettify/prettify.sunburst.css" rel="stylesheet" type="text/css" />
+
+    <script type="text/javascript">
+
+      var _gaq = _gaq || [];
+      _gaq.push(['_setAccount', 'UA-8922143-3']);
+      _gaq.push(['_trackPageview']);
+
+      (function() {
+        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+      })();
+
+    </script>
+    <style>
+        #the-node {
+            list-style: none;
+            margin: 0; padding: 0;
+        }
+        #the-node > li > span {
+            display: inline-block;
+            background: #fff;
+        }
+        #the-node > li {
+            background: #eee;
+            padding: 20px;
+        }
+        #the-node > li:hover {
+            background: #ddd;
+        }
+        #the-node > li + li {
+            margin-top: 5px;
+        }
+    </style>
+</head>
+<body>
+    <a id="github-forkme" href="https://github.com/medialize/jQuery-contextMenu"><img src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
+    <div id="container">
+    <h1><a href="https://github.com/medialize/jQuery-contextMenu">jQuery contextMenu</a></h1>
+    
+    <ul class="menu">
+        <li><a href="../index.html">About</a></li>
+        <li class="active"><a href="../demo.html">Demo</a></li>
+        <li><a href="../docs.html">Documentation</a></li>
+        <li><a href="http://rodneyrehm.de/en/">Author</a></li>
+    </ul>
+
+    <h2 id="demo">Demo: Context Menu on DOM Element</h2>
+    <p><code>jQuery.contextMenu</code> allows you to bind your menu to a DOM Element</p>
+    <div class="inline-spaces">
+<ul id="the-node">
+    <li><span>right click me 1</span></li>
+    <li><span>right click me 2</span></li>
+    <li>right click me 3</li>
+    <li>right click me 4</li>
+</li>
+    </div>
+
+    <h3 id="code">Example code: Context Menu on DOM Element</h3>
+    <script type="text/javascript" class="showcase">
+$(function(){
+    $('#the-node').contextMenu({
+        selector: 'li', 
+        callback: function(key, options) {
+            var m = "clicked: " + key + " on " + $(this).text();
+            window.console && 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: "quit"}
+        }
+    });
+});
+    </script>
+
+    <h3 id="html">Example HTML: Context Menu on DOM Element</h3>
+    <div style="display:none" class="showcase" data-showcase-import=".menu-1, .menu-1 + button"></div>
+    
+    <h2>jQuery Context Menu Demo Gallery</h2>
+    <ul id="demo-list">
+        <li><a href="../demo.html">Simple Context Menu</a></li>
+        <li class="current"><a href="on-dom-element.html">Context Menu on DOM Element</a></li>
+        <li><a href="dynamic.html">Adding new Context Menu Triggers</a></li>
+        <li><a href="dynamic-create.html">Create Context Menu on demand</a></li>
+        <li><a href="async-create.html">Create Context Menu (asynchronous)</a></li>
+
+        <li><a href="keeping-contextmenu-open.html">Keeping the context menu open</a></li>
+        <li><a href="callback.html">Command's action (callbacks)</a></li>
+
+        <li><a href="trigger-left-click.html">Left-Click Trigger</a></li>
+        <li><a href="trigger-hover.html">Hover Activated Context Menu</a></li>
+        <li><a href="trigger-hover-autohide.html">Hover Activated Context Menu With Autohide</a></li>
+        <li><a href="trigger-custom.html">Custom Activated Context Menu</a></li>
+
+        <li><a href="disabled-menu.html">Disabled Menu</a></li>
+        <li><a href="disabled.html">Disabled Command</a></li>
+        <li><a href="disabled-callback.html">Disabled Callback Command</a></li>
+        <li><a href="disabled-changing.html">Changing Command's disabled status</a></li>
+
+        <li><a href="accesskeys.html">Accesskeys</a></li>
+        <li><a href="sub-menus.html">Submenus</a></li>
+
+        <li><a href="input.html">Input Commands</a></li>
+        <li><a href="custom-command.html">Custom Command Types</a></li>
+        
+        <li><a href="menu-title.html">Menus with titles</a></li>
+
+        <li><a href="html5-import.html">Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</a></li>
+        <li><a href="html5-polyfill.html">HTML5 Polyfill</a></li>
+        <li><a href="html5-polyfill-firefox8.html">HTML5 Polyfill (Firefox 8)</a></li>
+    </ul>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/demo/sub-menus.html b/demo/sub-menus.html
index d53b53c5..dc6c853e 100755
--- a/demo/sub-menus.html
+++ b/demo/sub-menus.html
@@ -102,6 +102,7 @@ <h3 id="html">Example HTML: Submenus</h3>
     <h2>jQuery Context Menu Demo Gallery</h2>
     <ul id="demo-list">
         <li><a href="../demo.html">Simple Context Menu</a></li>
+        <li><a href="on-dom-element.html">Context Menu on DOM Element</a></li>
         <li><a href="dynamic.html">Adding new Context Menu Triggers</a></li>
         <li><a href="dynamic-create.html">Create Context Menu on demand</a></li>
         <li><a href="async-create.html">Create Context Menu (asynchronous)</a></li>
diff --git a/demo/trigger-custom.html b/demo/trigger-custom.html
index c80978b2..44776758 100755
--- a/demo/trigger-custom.html
+++ b/demo/trigger-custom.html
@@ -87,6 +87,7 @@ <h3 id="html">Example HTML: Custom Activated Context Menu</h3>
     <h2>jQuery Context Menu Demo Gallery</h2>
     <ul id="demo-list">
         <li><a href="../demo.html">Simple Context Menu</a></li>
+        <li><a href="on-dom-element.html">Context Menu on DOM Element</a></li>
         <li><a href="dynamic.html">Adding new Context Menu Triggers</a></li>
         <li><a href="dynamic-create.html">Create Context Menu on demand</a></li>
         <li><a href="async-create.html">Create Context Menu (asynchronous)</a></li>
diff --git a/demo/trigger-hover-autohide.html b/demo/trigger-hover-autohide.html
index 593df670..adc38294 100755
--- a/demo/trigger-hover-autohide.html
+++ b/demo/trigger-hover-autohide.html
@@ -81,6 +81,7 @@ <h3 id="html">Example HTML: Hover Activated Context Menu With Autohide</h3>
     <h2>jQuery Context Menu Demo Gallery</h2>
     <ul id="demo-list">
         <li><a href="../demo.html">Simple Context Menu</a></li>
+        <li><a href="on-dom-element.html">Context Menu on DOM Element</a></li>
         <li><a href="dynamic.html">Adding new Context Menu Triggers</a></li>
         <li><a href="dynamic-create.html">Create Context Menu on demand</a></li>
         <li><a href="async-create.html">Create Context Menu (asynchronous)</a></li>
diff --git a/demo/trigger-hover.html b/demo/trigger-hover.html
index 02174bb3..0bc5974d 100755
--- a/demo/trigger-hover.html
+++ b/demo/trigger-hover.html
@@ -80,6 +80,7 @@ <h3 id="html">Example HTML: Hover Activated Context Menu</h3>
     <h2>jQuery Context Menu Demo Gallery</h2>
     <ul id="demo-list">
         <li><a href="../demo.html">Simple Context Menu</a></li>
+        <li><a href="on-dom-element.html">Context Menu on DOM Element</a></li>
         <li><a href="dynamic.html">Adding new Context Menu Triggers</a></li>
         <li><a href="dynamic-create.html">Create Context Menu on demand</a></li>
         <li><a href="async-create.html">Create Context Menu (asynchronous)</a></li>
diff --git a/demo/trigger-left-click.html b/demo/trigger-left-click.html
index 2e45a1c8..41c48db4 100755
--- a/demo/trigger-left-click.html
+++ b/demo/trigger-left-click.html
@@ -79,6 +79,7 @@ <h3 id="html">Example HTML: Left-Click Trigger</h3>
     <h2>jQuery Context Menu Demo Gallery</h2>
     <ul id="demo-list">
         <li><a href="../demo.html">Simple Context Menu</a></li>
+        <li><a href="on-dom-element.html">Context Menu on DOM Element</a></li>
         <li><a href="dynamic.html">Adding new Context Menu Triggers</a></li>
         <li><a href="dynamic-create.html">Create Context Menu on demand</a></li>
         <li><a href="async-create.html">Create Context Menu (asynchronous)</a></li>
diff --git a/src/jquery.contextMenu.js b/src/jquery.contextMenu.js
index 08433479..68d7490e 100755
--- a/src/jquery.contextMenu.js
+++ b/src/jquery.contextMenu.js
@@ -344,36 +344,18 @@ var // currently active contextMenu trigger
             e.preventDefault();
             e.stopImmediatePropagation();
             
-            // This hack looks about as ugly as it is
-            // Firefox 12 (at least) fires the contextmenu event directly "after" mousedown
-            // for some reason `root.$layer.hide(); document.elementFromPoint()` causes this
-            // contextmenu event to be triggered on the uncovered element instead of on the
-            // layer (where every other sane browser, including Firefox nightly at the time)
-            // triggers the event. This workaround might be obsolete by September 2012.
-            $this.on('mouseup', function() {
-                mouseup = true;
-            });
             setTimeout(function() {
-                var $window, hideshow;
+                var $window, hideshow, possibleTarget;
                 // test if we need to reposition the menu
                 if ((root.trigger == 'left' && button == 0) || (root.trigger == 'right' && button == 2)) {
                     if (document.elementFromPoint) {
                         root.$layer.hide();
                         target = document.elementFromPoint(x - $win.scrollLeft(), y - $win.scrollTop());
                         root.$layer.show();
-
-                        selectors = [];
-                        for (var s in namespaces) {
-                            selectors.push(s);
-                        }
-
-                        target = $(target).closest(selectors.join(', '));
-
-                        if (target.length) {
-                            if (target.is(root.$trigger[0])) {
-                                root.position.call(root.$trigger, root, x, y);
-                                return;
-                            }
+                        
+                        if (root.$trigger.is(target) || root.$trigger.has(target).length) {
+                            root.position.call(root.$trigger, root, x, y);
+                            return;
                         }
                     } else {
                         offset = root.$trigger.offset();
@@ -398,26 +380,11 @@ var // currently active contextMenu trigger
                     }
                 }
 
-                hideshow = function(e) {
-                    if (e) {
-                        e.preventDefault();
-                        e.stopImmediatePropagation();
-                    }
-
-                    root.$menu.trigger('contextmenu:hide');
-                    if (target && target.length) {
-                        setTimeout(function() {
-                            target.contextMenu({x: x, y: y});
-                        }, 50);
-                    }
-                };
-            
-                if (mouseup) {
-                    // mouseup has already happened
-                    hideshow();
+                if (target && target.length) {
+                    target.contextMenu({x: x, y: y});
                 } else {
-                    // remove only after mouseup has completed
-                    $this.on('mouseup', hideshow);
+                    // TODO: it would be nice if we could prevent animations here
+                    root.$menu.trigger('contextmenu:hide');
                 }
             }, 50);
         },
@@ -1180,6 +1147,11 @@ $.fn.contextMenu = function(operation) {
     } else if (operation === "hide") {
         var $menu = this.data('contextMenu').$menu;
         $menu && $menu.trigger('contextmenu:hide');
+    } else if (operation === "destroy") {
+        $.contextMenu("destroy", {context: this});
+    } else if ($.isPlainObject(operation)) {
+        operation.context = this;
+        $.contextMenu("create", operation);
     } else if (operation) {
         this.removeClass('context-menu-disabled');
     } else if (!operation) {
@@ -1203,8 +1175,19 @@ $.contextMenu = function(operation, options) {
     }
     
     // merge with default options
-    var o = $.extend(true, {}, defaults, options || {}),
-        $document = $(document);
+    var o = $.extend(true, {}, defaults, options || {});
+    var $document = $(document);
+    var $context;
+    var _hasContext = false;
+    
+    if (!o.context || !o.context.length) {
+        o.context = document;
+    } else {
+        // you never know what they throw at you…
+        $context = $(o.context).first();
+        o.context = $context.get(0);
+        _hasContext = o.context !== document;
+    }
     
     switch (operation) {
         case 'create':
@@ -1221,7 +1204,9 @@ $.contextMenu = function(operation, options) {
             }
             counter ++;
             o.ns = '.contextMenu' + counter;
-            namespaces[o.selector] = o.ns;
+            if (!_hasContext) {
+                namespaces[o.selector] = o.ns;
+            }
             menus[o.ns] = o;
             
             // default to right click
@@ -1254,18 +1239,18 @@ $.contextMenu = function(operation, options) {
             }
             
             // engage native contextmenu event
-            $document
+            $context
                 .on('contextmenu' + o.ns, o.selector, o, handle.contextmenu);
             
             switch (o.trigger) {
                 case 'hover':
-                        $document
+                        $context
                             .on('mouseenter' + o.ns, o.selector, o, handle.mouseenter)
                             .on('mouseleave' + o.ns, o.selector, o, handle.mouseleave);                    
                     break;
                     
                 case 'left':
-                        $document.on('click' + o.ns, o.selector, o, handle.click);
+                        $context.on('click' + o.ns, o.selector, o, handle.click);
                     break;
                 /*
                 default:
@@ -1284,10 +1269,38 @@ $.contextMenu = function(operation, options) {
             break;
         
         case 'destroy':
-            if (!o.selector) {
+            var $visibleMenu;
+            if (_hasContext) {
+                // get proper options 
+                var context = o.context;
+                $.each(menus, function(ns, o) {
+                    if (o.context !== context) {
+                        return true;
+                    }
+                    
+                    $visibleMenu = $('.context-menu-list').filter(':visible');
+                    if ($visibleMenu.length && $visibleMenu.data().contextMenuRoot.$trigger.is($(o.context).find(o.selector))) {
+                        $visibleMenu.trigger('contextmenu:hide', {force: true});
+                    }
+
+                    try {
+                        if (menus[o.ns].$menu) {
+                            menus[o.ns].$menu.remove();
+                        }
+
+                        delete menus[o.ns];
+                    } catch(e) {
+                        menus[o.ns] = null;
+                    }
+
+                    $(o.context).off(o.ns);
+                    
+                    return true;
+                });
+            } else if (!o.selector) {
                 $document.off('.contextMenu .contextMenuAutoHide');
-                $.each(namespaces, function(key, value) {
-                    $document.off(value);
+                $.each(menus, function(ns, o) {
+                    $(o.context).off(o.ns);
                 });
                 
                 namespaces = {};
@@ -1297,7 +1310,7 @@ $.contextMenu = function(operation, options) {
                 
                 $('#context-menu-layer, .context-menu-list').remove();
             } else if (namespaces[o.selector]) {
-                var $visibleMenu = $('.context-menu-list').filter(':visible');
+                $visibleMenu = $('.context-menu-list').filter(':visible');
                 if ($visibleMenu.length && $visibleMenu.data().contextMenuRoot.$trigger.is(o.selector)) {
                     $visibleMenu.trigger('contextmenu:hide', {force: true});
                 }