Question

I am currently working on a menu in jQuery, which has keyboard shortcuts for the menu items, as well as access keys.

I pass data to build the menu using an object literal, which storesd the function that is to be bound to the menu item, something like this:

var my_menu = [
    { 
        label     : 'File',
        accessKey : 'F',
        func      : function() { alert('File shown'); } 
    }
];

I am binding the func function to the menu item (an <li> element) using jQuery’s click() function, something like:

this_li.click(function() { this_click_func.call() });

I then add keyboard support by listening for keydown() on the document. If the combination of keys match the accessKey, I simply use the click() method in jQuery to fire the function, even though in reality, they haven’t clicked the item.

This works fine, but I wanted opinion on this method. Would it be better practice to run the function when the combination of keys match as well, or is it sufficient to simply replicate a click using click()?

Any comments gratefully received.

Answer 1

You should not trigger the click() handler, as other components/ plugins may also have subscribed to the click() event.

In your keydown() handler you should again call this_click_func.call().

Furthermore, what you’ve got is Object Literal Notation, not JSON.