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前面。

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

请参阅此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();
});

使用javascript在x，y模拟鼠标点击

1 个答案: