javascriptmouseeventdom3

Is there any way of setting the buttons attribute of MouseEvent in Mozilla?


I'm used to simulating mouse clicks in Javascript like so:

var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, document.view, 1, 1492, 398, 1308, 274, false, false, false, false, 0, null);
var element = document.getElementById("x:1430424820.87:chkState:0");
element.dispatchEvent(evt);

While this does dispatch the click event, initMouseEvent() doesn't set the 'buttons' attribute of the MouseEvent interface described in DOM 3:

[Constructor(DOMString typeArg, optional MouseEventInit mouseEventInitDict)]
interface MouseEvent : UIEvent {
    readonly    attribute long           screenX;
    readonly    attribute long           screenY;
    readonly    attribute long           clientX;
    readonly    attribute long           clientY;
    readonly    attribute boolean        ctrlKey;
    readonly    attribute boolean        shiftKey;
    readonly    attribute boolean        altKey;
    readonly    attribute boolean        metaKey;
    readonly    attribute short          button;
    readonly    attribute EventTarget?   relatedTarget;
    // Introduced in DOM Level 3
    readonly    attribute unsigned short buttons;
    boolean getModifierState (DOMString keyArg);
};

Adding "evt.buttons = 1"...

var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, document.view, 1, 1492, 398, 1308, 274, false, false, false, false, 0, null);
evt.buttons = 1;
var element = document.getElementById("x:1430424820.87:chkState:0");
element.dispatchEvent(evt);

...has no effect. Does anyone know how to do it?


Solution

  • With .createEvent() and initEvent() (= deprecated now) you use an oldschool way. You can create and init an event in one call to the events constructor (each event type has an own, e.g. KeyboardEvent, MouseEvent, ...) like so:

    var evt = new MouseEvent('click', {
            button: 0,
            buttons: 1,
            bubbles: true,
            /* for all available properties see reference below */
        });
    element.dispatchEvent(evt);
    

    Create a MouseEvent without init-object to see the default values of the properties:

    console.log(new MouseEvent('click'));
    

    MouseEvent Reference here.