Question

so I’m using the following context menu:

(function($) {
$.fn.setUpContextMenu = function() {
    $(this).dialog({
        autoOpen: false,
        modal: true,
        resizable: false,
        width: 'auto',
        height: 'auto',
        minHeight: 'auto',
        minWidth: 'auto'
    });

    return $(this);
};

$.fn.openContextMenu = function(jsEvent) {
    var menu = $(this);
    menu.css('padding', 0);

    menu.dialog('option', 'position', [jsEvent.clientX, jsEvent.clientY]);
    menu.unbind('dialogopen');
    menu.bind('dialogopen', function(event, ui) {
        $('.ui-dialog-titlebar').hide();
        $('.ui-widget-overlay').unbind('click');
        $('.ui-widget-overlay').css('opacity', 0);
        $('.ui-widget-overlay').click(function() {
            menu.dialog('close');
        });
    });
    menu.dialog('open');

    return menu;
};

})(jQuery);

I use it like so:

$('#context-menu a').css('display', 'block').button();
        $('#context-menu').setUpContextMenu();
        $(document).bind('contextmenu', function(e) {
            $('#context-menu').openContextMenu(e);
            return false;
        });

The context menu looks like this:

<!--RIGHT-CLICK MENU MARKUP!--> 
<div id="context-menu">
    <a href="javascript:void(0)" id="option1">Option 1</a>
    <a href="javascript: alert($(this).attr('href'));">Option 2</a>
    <a href="javascript:void(0)" id="option3">Option 3</a>
    <a href="javascript:void(0)" id="option4">Option 4</a>
</div>

Here’s my problem. I’m trying to figure out how to capture the right click event, that way I can determine from what element the event was fired. I know that if I have to I can just add a new data value to $(‘#context-menu’) that holds the event, but that seems very roundabout and not very elegant at all. There has to be a better way to get the original event.

Thanks for any help, I appreciate it 🙂

*EDIT: * To clarify, I want to figure out how to refer to the right click event from inside the tags inside the actual context menu markup. I execute some javascript when they are clicked, how do I refer to the event in order to figure out which element fired it?

Answer 1

If I understand what you want now, which seeing your site helped me understand (I think?) I haven’t created the code here but I will give you the logic behind it.

OnRightClick(of the form element) – Store $(this)(the form element) as a variable in your javascript, the function that loads when your page does.

SelectMenuItem – When you select your menu item you can then reference the variable that contains your triggered element. Once you are finished with the element clear the variable.

You may also want to clear it when the context menu is closed without a selection.

Better Yet, jQuery UI has datastorage check this post out for some helpful code 🙂

jQuery context menu – finding what element triggered it off