Question

I’d like to use JavaScript only (no jQuery) to replace an inline onmenuclick event handler generated by a third party control with my own.

The custom control has added the following HTML to the page:

<ie:menuitem
  menugroupid="200"
  description="Create a site for a team or project."
  text="New Site"
  onmenuclick="if (LaunchCreateHandler('Site')) { STSNavigate('\u002fsites\u002fsd\u002f_layouts/newsbweb.aspx') }"
  iconsrc="/_layouts/images/newweb32.png" type="option" id="zz4_MenuItem_CreateSite"></ie:menuitem>

I’m trying to replace the onmenuclick handler with:

var createSiteMenuItem = document.getElementById('zz4_MenuItem_CreateSite');
if (createSiteMenuItem)
    createSiteMenuItem.onmenuclick = function () { alert('Hello!'); }

The original handler still fires! I’m making sure the script runs after the document has loaded.

Is this the correct approach?

Answer 1

The trouble is that directly assigning to onmenuclick is unreliable and non-standard. You need to use attachEvent() (IE) or addEventListener() (everyone else).

Edit:

As explained below, the actual problem was that in Javascript, element attributes are case-sensitive, despite the HTML, which isn’t. So any reference to the menu click event in Javascript has to refer to it as "onMenuClick".