HTML5 contextmenu - Access originally clicked element when menu item is clicked

Question

I'm experimenting with the HTML5 contextmenu item in the latest version of Firefox (only browser that currently supports it). When I click on a menu item from the context menu how can I access the original element that was clicked when the menu was spawned?

The use case would be displaying a list of items and you want the user to perform an action on a particular item. Once the action is clicked from the menu you need a way to determine what element in the list was originally clicked on to spawn the menu.

Here is a JSFiddle (use Firefox to test)

Answer 1

Just save it somewhere like this.cte = arguments[0]; then retrieve it later document.getElementById('testitem').cte

http://jsfiddle.net/GALmp/4/

Answer 2

I was in the same or very similar situation. I have a context menu bound to a <tr> in the header of a table. When the user clicks a certain item in the contextmenu, inside the click event handler I needed to determine which <th> element the mouse pointer was over when a <menuitem> element was clicked.

Solution: document.activeElement refers to exactly the element I need. Thanks to:

• this SO question
• comment 7 on the related google chrome issue thread.

Answer 3

You can use the jquery contextMenu plug-in, which is browser independent. In particular, the following example: http://medialize.github.io/jQuery-contextMenu/demo/on-dom-element.html shows how to identify the triggering DOM element.

Answer 4

The this keyword works as in any event.