Setting click events pageX and pageY always reverts to 0

Question

Not sure what I could be doing wrong, but I'm trying to simulate a click event by giving it a X and Y value.

Here is my code

var clickEvent = document.createEvent('MouseEvent'),
    DOMbody = document.getElementsByTagName("body")[0],
    testX = targetJoint.depthX * DOMbody.clientWidth,
    testY = DOMbody.clientHeight - (targetJoint.depthY * DOMbody.clientHeight);

clickEvent.pageX = testX;
clickEvent.pageY = testY;

if (counter < 5000) {
    counter++;
    console.log('testX: ' + testX);
    console.log('testY: ' + testY);
    console.log('click event X: ' + clickEvent.pageX);
    console.log('click event Y: ' + clickEvent.pageY);
}

//}
clickEvent.initEvent(eventType, true, true);
node.dispatchEvent(clickEvent);

Where I am getting testX and testY is irrelevant. It's coming from Kinect data, and the console logs would look like this:

testX: 701.220
testY: 290.693
click event X: 0
click event Y: 0

testX: 704.132
testY: 291.669
click event X: 0
click event Y: 0

testX: 689.852
testY: 284.198
click event X: 0
click event Y: 0

So why would it be 0 even though I am clearly setting it with a proper value?

EDIT : although this isn't really the same data I'd get back, it would be impossible to recreate a fiddle with the kinect data coming in. Made this rough example on fiddle to at least show that the click event pagex/y is 0 even when I'm explicitly setting it (on the fiddle for whatever reason the testY is 0 too, but the testX isnt and the clickEvent.pageX is 0)

Answer 1

I did some research and found that MDN Documentation for creating Events have some holes on it, as it doesn't seem to show a reliable, cross-browser solution for simulating mouse events.

Anyway, I found that there are some ways to create a MouseEvent instance:

Using document.createEvent:

var mouseEvent = document.createEvent('MouseEvent');

mouseEvent.initMouseEvent('click', true, true, window, 1, 100, 100, 100, 100);

This creates not only .clientX and .clientY, but also pageX and pageY as well, however, as it's stated in the documentation, .initMouseEvent is deprecated.

Using MouseEvent constructor:

var mouseEvent = new MouseEvent('click', {
    clientX: 100,
    clientY: 100
});

MouseEvent doesn't support pageX and pageY properties, and it's also not supported by Internet Explorer

In the MouseEvent constructor documentation, its said that for browsers who don't support MouseEvent constructor, this polyfill should be used, which is currently creating the event with document.createEvent('MouseEvent') and using the deprecated .initMouseEvent method to initialize it...

What I don't get was the fact that the polyfill does not accept arguments for all properties except for .bubbles and .cancelable (i.e: .screenX, .screenY, .clientX and .clientY are not accepted as well), if you use the polyfill you should add the properties you need to it, to do that you just need to check how .bubbles and .cancelable properties are being setted.

So the ultimate solution should be using that polyfill (which I'm not showing here since it can be changed later on) and then create the method just by instantiating MouseEvent:

// vars
var counter = 0,
    DOMfoo = document.getElementById('foo'),
    targetJoint = {
        depthX: 0.5,
        depthY: 0.3,
    };
    
// functions
function simulateEvent (eventType, node) {  
    var DOMbody = document.getElementsByTagName("body")[0],
        testX = targetJoint.depthX * DOMbody.clientWidth,
        testY = DOMbody.clientHeight - (targetJoint.depthY * DOMbody.clientHeight),
        clickEvent = new MouseEvent('test', {
            clientX: testX,
            clientY: testY
        });

    if (counter < 5000) {
        counter++;
        console.log('testX: ' + testX);
        console.log('testY: ' + testY);
        console.log('click event X: ' + clickEvent.clientX);
        console.log('click event Y: ' + clickEvent.clientY);
    }

    clickEvent.initEvent(eventType, true, true);
    node.dispatchEvent(clickEvent);
}

// init
simulateEvent('click', DOMfoo);

<button id="foo">Foo</button>