Comments (6)
How many different types of contextMenus are you handling here? Do you know that contextMenu itself uses delegated events? It'll bind one (to 3) events per registered contextMenu. Each menu has its own configuration space.
If it is unfeasible to register distinct menus, we might be able to allow the build function to overwrite the $trigger element. I haven't thought of the ramifications, yet, though…
Why would you want $.contextMenu() to accept a DOMElement / jQuery instance? That would defeat the event delegation logic. What exactly is your use-case for this?
from jquery-contextmenu.
Ok, I see events are bound to $body internally (even though I do not get the $body = $body
assignment in L1149).
I'm talking about possibly 100s of list items. Even though there are only a few events bound at the document level, there is quite a lot of data associated with it. I'll see if this has any performance implications.
I moved the menu initialization to the list item level and might be even able to get rid of the build
callback.
However, I found a serious quirk when handling multiple context menus. Do you possibly have FireGestures installed as a Firefox Add-on? When this Add-on is not installed or disabled, opening a second context menu will not close the first. Additional left and right clicks have also unexpected results.
This behavior can be reproduced on your test page http://jsfiddle.net/rodneyrehm/JdwxT/
(Tested on a couple Macs with Firefox 12, other browsers work as expected.)
I use your plugin in a Backbone environment, so each list item is rendered as a separate view that already has a root element tied to it. Using $el
or simply el
as the trigger would be less DRY instead of explicitly stating the selector.
There is another caveat, though. At first I used the same selector (the list item) in order to initialize each context menu. This is normally fine in Backbone as each view is scoped to a root element. As your delegation logic does not know about the root element, delegation will fail and the plugin will always show the first context menu.
I solved this by adding a unique id to the trigger element and pass the according selector to the plugin:
...selector: '.listEntry[data-id=' + this.model.id + ']'...
Too much information? :-)
from jquery-contextmenu.
Ok, I see events are bound to $body internally (even though I do not get the $body = $body assignment in L1149).
I have no clue what drugs may have caused that. Fixed it though, thx!
I'm talking about possibly 100s of list items. Even though there are only a few events bound at the document level, there is quite a lot of data associated with it. I'll see if this has any performance implications.
Your use-case is pretty much what I designed for. You register one(!) menu for ul.some-menu > li
and each <li>
gets a distinct menu. Using the build()
approach, you can customize the menu for distinct types of <li>
. Either you overlooked that, or I did not understand what you're getting at.
However, I found a serious quirk when handling multiple context menus. Do you possibly have FireGestures installed as a Firefox Add-on? When this Add-on is not installed or disabled, opening a second context menu will not close the first. Additional left and right clicks have also unexpected results.
How the F* did you figure out I was using FireGestures? (and yes, I am)
disabling the addon I can see your problem.
After running this test in Firefox 12 and Nightly, Chrome, Safari and Opera, I'm tempted to conclude a bug in Firefox 12. Chrome, Safari and Firefox Nightly (would be Firefox 14/15) behave the same. Opera delayes the contextmenu
event because of its »Opera Mouse Gestures Thingie« and Firefox 12 simply fires the contextmenu
event on the wrong element.
I have not tried to work around this bug, yet. But at least we know what's going on… As the problem does not occur in nightly, I'm not compelled to sift through Bugzilla :/
I use your plugin in a Backbone environment, so each list item is rendered as a separate view that already has a root element tied to it. Using $el or simply el as the trigger would be less DRY instead of explicitly stating the selector.
I haven't used Backbone. But what keeps you from registering a menu for .gimme-some-menu > li
and add the class gimme-some-menu
to the <ul>
created by Backbone? Use build()
to create custom menus for each <li>
on demand.
Too much information? :-)
There is such a thing?
from jquery-contextmenu.
Well, setTimeout came to save the day… probably not the nicest solution, but it works. 1.5.17 contains a workaround for the Firefox 12 bug you found. Anything else?
from jquery-contextmenu.
1.5.17 works fine for me, thank you!
Either you overlooked that, or I did not understand what you're getting at.
I think I know what I was missing. I used the build
option in the first place, but bound to theul
instead of the individual li
s. When I got to know the plugin uses event delegation internally, I switched to the li
s and had a separate plugin call for each li
in the corresponding list item view. That even allowed me to get rid of the build
option as each context menu was now created in the context of this very list item (but required to use a distinct selector for each li
).
Finally, I switched back to one single plugin call in the list view, but stating the li
s as the selector (as proposed by you). In this case I of course need the build
option again but only have one plugin call and one selector. Much better.
How the F* did you figure out I was using FireGestures? (and yes, I am)
I had the problem on one Mac but not another (same OS, same Firefox). So I disabled all Add-on on the one that was working and it also failed. Then I enabled the Add-ons one after another and bamm - FireGestures. That you have it installed was just a bad guess, then.
from jquery-contextmenu.
Ok, happy it works for you :)
from jquery-contextmenu.
Related Issues (20)
- How can i rebind the event and overwrite items callback ? HOT 1
- Disable Icons HOT 2
- Allow the selector receive an Element or JQueryNode
- Context menu jumps to the top of the screen HOT 1
- Display bug for a long list of submenu
- Seeking an official way to change context menu items style
- bug?: defining left click as trigger type triggers "oncontextmenu" of trigger button HOT 1
- get the element where the context menu was shown on right click HOT 2
- Issue with menu that is taller than the viewport with submenu items HOT 1
- Chrome v96.0.4664.45 HOT 1
- Do beta (v3) docs exist? The 'v3 Documentation' link goes to v2 Docs currently.
- Can't get Font Awesome icons working HOT 5
- use custom svg icons by gulp HOT 1
- Is it possible to hide a separator? HOT 1
- Animations do not work.
- Security - CVE-2021-41184: Upgrade embedded jQuery UI Position to 1.13+ (v2.x)
- Left click picking up parent as well as targeted child div HOT 1
- Context Menu Titles
- Append to an existing contextMenu?
- Jquery-contextMenu does not trigger the event on the new target element
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jquery-contextmenu.