Search code examples
javascriptdojocross-browserdom-eventsright-click

How to generate a right-click event in all browsers


A little context:
The app I'm working on has a right-click context menu for certain objects on the screen. The current design as that each of these objects listens for a right-click, sends an AJAX request to get the context data for that object, uses that data to create a PopupMenu2 from Dojo 0.4.3 (I know!), and then generates a right-click to launch the Dojo menu.

I'm trying to figure out a way to generate a right-click event for all browsers. Currently, we only support IE and use the oncontextmenu event.

Restrictions:

  • No jQuery :(
  • I cannot pre-load all the data for the objects on screen to create the Dojo menu and avoid the AJAX request.

Solution

  • This should get you started with generating a right click event. The key to the right click is the button parameter: button = 2.

    if (document.createEvent) {
      var rightClick = document.createEvent('MouseEvents');
      rightClick.initMouseEvent(
        'click', // type
        true,    // canBubble
        true,    // cancelable
        window,  // view - set to the window object
        1,       // detail - # of mouse clicks
        10,       // screenX - the page X coordinate
        10,       // screenY - the page Y coordinate
        10,       // clientX - the window X coordinate
        10,       // clientY - the window Y coordinate
        false,   // ctrlKey
        false,   // altKey
        false,   // shiftKey
        false,   // metaKey
        2,       // button - 1 = left, 2 = right
        null     // relatedTarget
      );
      document.dispatchEvent(rightClick);
    } else if (document.createEventObject) { // for IE
      var rightClick = document.createEventObject();
      rightClick.type = 'click';
      rightClick.cancelBubble = true;
      rightClick.detail = 1;
      rightClick.screenX = 10;
      rightClick.screenY = 10;
      rightClick.clientX = 10;
      rightClick.clientY = 10;
      rightClick.ctrlKey = false;
      rightClick.altKey = false;
      rightClick.shiftKey = false;
      rightClick.metaKey = false;
      rightClick.button = 2;
      document.fireEvent('onclick', rightClick);
    }
    

    I would suggest Googleing for 'document.createEvent' and 'document.createEventObject' for more detail on the API from the Mozilla and MSDN sites.

    Hope this helps!