Este dilema se puede abordar de diferentes maneras, por lo tanto te mostramos la respuesta más completa en nuestra opinión.
Solución:
Crear un evento usando el CustomEvent constructor, o (cuando no es compatible), crear un evento usando document.createEvent con como argumento el string “HTMLEvents” (porque va a crear un click evento). Luego, usa el initEvent método para crear un click evento.
Finalmente, utilice el dispatchEvent método para disparar el evento. Si está utilizando IE, el fireEvent en su lugar se debe utilizar el método.
Si desea activar el evento de clic derecho, contextmenuusa el siguiente código:
var element = document.getElementById('yourElement');
if (window.CustomEvent)
element.dispatchEvent(new CustomEvent('contextmenu'));
else if (document.createEvent)
var ev = document.createEvent('HTMLEvents');
ev.initEvent('contextmenu', true, false);
element.dispatchEvent(ev);
else // Internet Explorer
element.fireEvent('oncontextmenu');
Otra variante, esta vez usando la API MouseEvent que es un poco más moderna. En mi caso, en realidad envío los tres eventos mouseup/mousedown/contextmenu:
var element = document.getElementById("yourElement");
var ev1 = new MouseEvent("mousedown",
bubbles: true,
cancelable: false,
view: window,
button: 2,
buttons: 2,
clientX: element.getBoundingClientRect().x,
clientY: element.getBoundingClientRect().y
);
element.dispatchEvent(ev1);
var ev2 = new MouseEvent("mouseup",
bubbles: true,
cancelable: false,
view: window,
button: 2,
buttons: 0,
clientX: element.getBoundingClientRect().x,
clientY: element.getBoundingClientRect().y
);
element.dispatchEvent(ev2);
var ev3 = new MouseEvent("contextmenu",
bubbles: true,
cancelable: false,
view: window,
button: 2,
buttons: 0,
clientX: element.getBoundingClientRect().x,
clientY: element.getBoundingClientRect().y
);
element.dispatchEvent(ev3);