设置点击事件时，pageX和pageY总是会重置为0。

Question

不确定我做错了什么，但我正在尝试通过给它X和Y值来模拟点击事件。

这是我的代码：

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);

我从哪里获取testX和testY并不重要。它们来自Kinect数据，控制台日志会像这样：

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

那么，即使我明确设置了正确的值，为什么它还是0呢？编辑：尽管这不是我收到的完全相同的数据，但无法重新创建一个带有kinect数据的fiddle。在fiddle上做了一个简单的示例，至少表明即使我明确设置了它（在某些原因下，testY也是0，但是testX不是，而clickEvent.pageX是0）。

- jdmdevdotnet

---

@Daniel 不，看起来不是这样。 - jdmdevdotnet

你说得对，它已经被弃用了。 - Daniel

那这个怎么样？https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/MouseEvent 看起来JavaScript有一个鼠标事件构造器MouseEvent，在那里你可以设置clientX和clientY！ - Daniel

我并不在意IE，我们主要使用Chrome。 - jdmdevdotnet

如果是这样，我已经有答案了！ - Daniel

Answer 1

我进行了一些研究，发现创建事件的MDN文档存在一些不足之处，因为它似乎没有展示一种可靠的、跨浏览器的模拟鼠标事件的解决方案。

无论如何，我发现有一些方法可以创建MouseEvent实例：

使用document.createEvent：

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

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

这不仅创建了.clientX和.clientY，还创建了pageX和pageY，但是根据文档所述，.initMouseEvent已被弃用。

使用MouseEvent构造函数：

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

MouseEvent不支持pageX和pageY属性，同时它也不被Internet Explorer支持

在MouseEvent构造函数文档中，指出对于不支持MouseEvent构造函数的浏览器，应该使用这个polyfill，它目前是通过document.createEvent('MouseEvent')创建事件并使用已弃用的.initMouseEvent方法进行初始化...

我不明白的是polyfill不接受除了.bubbles和.cancelable（即：也不接受.screenX、.screenY、.clientX和.clientY）的所有属性参数，如果你使用polyfill，你需要向其中添加所需的属性，只需检查如何设置.bubbles和.cancelable属性即可。

因此，最终解决方案应该是使用该polyfill（我这里没有展示，因为它可能会在以后更改），然后通过实例化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>

- Daniel