如何使用 JavaScript 中的 x,y 坐标模拟点击?

IT技术 javascript jquery html mouseevent mouseclick-event
2021-02-01 17:13:03

是否可以使用给定的坐标来模拟网页中 JavaScript 的点击?

5个回答

您可以调度click事件,但这与真正的点击不同。例如,它不能用于诱使跨域 iframe 文档认为它已被点击。

所有现代浏览器都支持document.elementFromPointHTMLElement.prototype.click(),因为至少 IE 6、Firefox 5、任何版本的 Chrome 以及您可能关心的任何版本的 Safari。它甚至会跟随链接并提交表格:

document.elementFromPoint(x, y).click();
@RadiantHex:是的,事实上 IE 是第一个实现它的,它可以追溯到 IE6。Chrome、Firefox 和 Safari 5 实现很好,但 Safari 4 和 Opera 不正确(虽然可行)。请参阅quirksmode.org/dom/w3c_cssom.html#documentview
2021-03-12 17:13:03
这似乎不适用于 $.live() 事件,有人如何使它也适用于使用 $.live() 创建的事件吗?
2021-03-16 17:13:03
@parixit:不,这是不可能的。您可以模拟对 iframe 的单击,但它只会向上传播包含文档。包含的文档中的任何内容都不会受到影响(出于非常明显的安全原因)。
2021-03-20 17:13:03
@AndyE 这现在在以下条件下工作:我有网页,我正在从另一个域而不是我的域加载 Iframe。我想点击 iframe 区域。您对此有什么解决方案吗?
2021-03-22 17:13:03
我对这个发现感到非常高兴!!=D 现在让许多被认为不可能的事情成为可能 =) ... 或者至少不那么复杂。谢谢!!
2021-04-03 17:13:03

是的,您可以通过创建一个事件并分派它来模拟鼠标点击:

function click(x,y){
    var ev = document.createEvent("MouseEvent");
    var el = document.elementFromPoint(x,y);
    ev.initMouseEvent(
        "click",
        true /* bubble */, true /* cancelable */,
        window, null,
        x, y, 0, 0, /* coordinates */
        false, false, false, false, /* modifier keys */
        0 /*left*/, null
    );
    el.dispatchEvent(ev);
}

小心click在元素上使用该方法——它被广泛实现但不是标准的,并且会在例如 PhantomJS 中失败。我认为 jQuery 的实现是.click()正确的,但尚未确认。

这比jQuery的强大得多 $.click()
2021-03-14 17:13:03
initMouseEvent您可以使用代替弃用的var event = new MouseEvent( "click", { clientX: x, clientY: y, bubbles: true } )这也显示在stackoverflow.com/a/36144688/384670 中
2021-03-15 17:13:03
把我从一团糟中救了出来。我最初的方法失败了,但这个方法救了我,谢谢。
2021-03-23 17:13:03
2021-03-23 17:13:03
plus1 不使用 jQuery。与公认的答案相反,这个答案确实回答了这个问题。
2021-04-09 17:13:03

这只是torazaburo 的答案,更新为使用 MouseEvent 对象。

function click(x, y)
{
    var ev = new MouseEvent('click', {
        'view': window,
        'bubbles': true,
        'cancelable': true,
        'screenX': x,
        'screenY': y
    });

    var el = document.elementFromPoint(x, y);

    el.dispatchEvent(ev);
}

它确实对我有用,但它会将正确的元素打印到控制台

这是代码:

function click(x, y)
{
    var ev = new MouseEvent('click', {
        'view': window,
        'bubbles': true,
        'cancelable': true,
        'screenX': x,
        'screenY': y
    });

    var el = document.elementFromPoint(x, y);
    console.log(el); //print element to console
    el.dispatchEvent(ev);
}
click(400, 400);
它对这个答案没有任何补充:stackoverflow.com/a/36144688/2000654
2021-03-19 17:13:03

出于安全原因,您不能用 javascript 移动鼠标指针,也不能用它模拟点击。

你想要完成什么?

您绝对可以模拟具有特定 X/Y 坐标的点击,尽管它的行为方式不会完全相同。
2021-03-14 17:13:03
真相在于下面的答案,createEvent()+initMouseEvent()
2021-03-17 17:13:03
就我而言,测试。
2021-04-02 17:13:03
@Aicule:谢谢你让我知道!我会在问题中添加一些信息。我只是在试验,没有什么真正有成效的 =)
2021-04-07 17:13:03
在 Chrome 和 Safari 中,您可以在特定的 x,y 位置触发点击。这就是这个演示的工作原理。Firefox 是唯一失败的浏览器,所以这可能是 Firefox 特定的安全策略。
2021-04-10 17:13:03