javascript - 设置点击事件 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 上做了这个粗略的例子。至少显示点击事件 pagex/y 为 0，即使我明确设置它(无论出于何种原因在 fiddle 上 testY 也是 0，但是 testX 不是并且 clickEvent.pageX 是 0)

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然而，as it's stated in the documentation , .initMouseEvent已弃用。

使用 MouseEvent 构造函数:

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

MouseEvent不支持 pageX和 pageY属性，它也是 not supported by Internet Explorer

在MouseEvent构造函数文档，它说对于不支持 MouseEvent 的浏览器构造函数，this 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>