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

Question

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?

score 1 · Accepted Answer · answered Oct 25 '14 at 14:45

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.

score 0 · Answer 2 · answered Oct 27 '14 at 19:34

Thanks much for the response. That's much easier than what I ended up doing:

   var evtInit = {};

// Event interface
Object.defineProperty(evtInit, 'bubbles', {writable: true, enumerable: true, configurable: true, value: true}, false);
Object.defineProperty(evtInit, 'cancelable', {writable: true, enumerable: true, configurable: true, value: true}, false);
Object.defineProperty(evtInit, 'currentTarget', {writable: true, enumerable: true, configurable: true, value: true}, false);
Object.defineProperty(evtInit, 'eventPhase', {writable: true, enumerable: true, configurable: true, value: true}, false);
Object.defineProperty(evtInit, 'target', {writable: true, enumerable: true, configurable: true, value: true}, false);
Object.defineProperty(evtInit, 'timeStamp', {writable: true, enumerable: true, configurable: true, value: true}, false);
Object.defineProperty(evtInit, 'type', {writable: true, enumerable: true, configurable: true, value: 2}, false);

// UIEvent interface
Object.defineProperty(evtInit, 'view', {writable: true, enumerable: true, configurable: true, value: null}, false);
Object.defineProperty(evtInit, 'detail', {writable: true, enumerable: true, configurable: true, value: 0}, false);

// MouseEvent interface
Object.defineProperty(evtInit, 'button', {writable: true, enumerable: true, configurable: true, value: 0}, false);
Object.defineProperty(evtInit, 'buttons', {writable: true, enumerable: true, configurable: true, value: 0}, false);
Object.defineProperty(evtInit, 'clientX', {writable: true, enumerable: true, configurable: true, value: 0}, false);
Object.defineProperty(evtInit, 'clientY', {writable: true, enumerable: true, configurable: true, value: 0}, false);
Object.defineProperty(evtInit, 'ctrlKey', {writable: true, enumerable: true, configurable: true, value: 0}, false);
Object.defineProperty(evtInit, 'screenX', {writable: true, enumerable: true, configurable: true, value: 0}, false);
Object.defineProperty(evtInit, 'screenY', {writable: true, enumerable: true, configurable: true, value: 0}, false);

// These two don't work. Don't know why.
Object.defineProperty(evtInit, 'mozPressure', {writable: true, enumerable: true, configurable: true, value: 1}, false);
Object.defineProperty(evtInit, 'mozInputSource', {writable: true, enumerable: true, configurable: true, value: MouseEvent.FOO}, true);


evtInit.screenX = 1506;
evtInit.screenY = 388;
evtInit.clientX = 1326;
evtInit.clientY = 273;
evtInit.buttons = 1;

var element = document.getElementById("element_id");

evt = new MouseEvent(eventType, evtInit);

I thought I had to construct the object! Oh, well.

Now if I can just figure out how to set the mozInputSource attribute... (separate question).

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

2 Answers2