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数据的小提琴。制作这个粗略的例子在Details about the Hibernate-specific API here上，至少显示点击事件pagex / y为0，即使我明确地设置它（由于任何原因，testY也是0，但是{{ 1}} isnt，testX为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，当前正使用{{1}创建事件并使用已弃用的document.createEvent('MouseEvent')方法初始化它......

我没有得到的事实是，polyfill不接受所有属性的参数，除了 .initMouseEvent 和 .bubbles < em>（即：.cancelable，.screenX，.screenY和.clientX也不被接受，如果你使用polyfill你应该添加属性你需要它，为此，您只需要检查.clientY和.bubbles属性的设置方式。

所以最终的解决方案应该是使用polyfill （我之前没有在这里显示，因为它可以在以后更改），然后通过实例化创建方法.cancelable：

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

设置单击事件pageX和pageY始终恢复为0

1 个答案: