javascript - 使用javascript模拟鼠标在x，y处单击

Question

我正在尝试使用 javascript 在 x,y 坐标处模拟鼠标单击。我正在使用以下适用于大多数 html 元素的函数:

setTimeout(function() {
    var event = document.createEvent("MouseEvents");
    event.initEvent("click", true, true);
    document.elementFromPoint(x, y).dispatchEvent(event);
}, 1000);

但是，当点击包含在文本框内的坐标时，无法选择文本框(输入html控件)。

无论如何我可以模拟选择输入 html 元素吗？

注意:网页顶部有一些东西，我有点使用 javascript 将点击操作传递到它下面的网页。

Answer 1

这jsfiddle演示您可能面临的问题。当您执行 document.elementFromPoint(x, y) 时，它不会超出您的叠加层，因为您的叠加层位于文档 z-index 的前面。

为了解决这个问题，您可以将点击处理程序绑定(bind)到叠加层，快速隐藏它，获取下面的元素，然后再次显示叠加层。

查看此 jsfiddle

overlay.addEventListener("click", function (e) {
    var element = null;

    this.style.display = 'none'; //Hide it.
    element = document.elementFromPoint(e.x, e.y); //Get your element
    this.style.display = ''; //Unhide it.

    var event = document.createEvent("MouseEvents");
    event.initEvent("click", true, true);
    element.dispatchEvent(event);
});

这将在您的叠加层后面点击。然而，simply triggering the click event在文本输入元素上不会给它焦点。

我不确定 jQuery 在源代码中做了什么......我试图追踪它，但没有成功。但是，使用 jQuery 的 focus() 方法 works here .

overlay.addEventListener("click", function (e) {
    var element = null;

    this.style.display = 'none'; //Hide it.
    element = document.elementFromPoint(e.x, e.y);
    this.style.display = ''; //Unhide it.

    $(element).focus();
});