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


Answers:


145

您可以调度点击事件,尽管这与实际点击不同。例如,它不能用于欺骗跨域iframe文档以使其被点击。

所有现代浏览器都支持document.elementFromPointHTMLElement.prototype.click(),因为至少IE 6,火狐5,Chrome浏览器和Safari的你很可能任何版本可能任何版本的关心。它甚至会点击链接并提交表格:

document.elementFromPoint(x, y).click();

https://developer.mozilla.org/zh_CN/DOM:document.elementFromPoint https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/click


1
@RadiantHex:是的,事实上IE是第一个实现它的工具,它可以追溯到IE6。Chrome,Firefox和Safari 5的实现都可以,但Safari 4和Opera的实现不正确(尽管可行)。请参阅quirksmode.org/dom/w3c_cssom.html#documentview
Andy E

1
我为这个发现感到高兴!= D现在使许多被认为不可能的事情成为可能=)...或至少不那么复杂。谢谢!!
RadiantHex

1
这似乎不适用于$ .live()事件,是否有人能使其与通过$ .live()创建的事件一起起作用?
ActionOwl

1
@AndyE现在,它在以下条件下工作:我有网页,正在从非我的域中加载iframe。我想在iframe区域中单击。您对此有什么解决方案吗?
Parixit

2
@parixit:不,不可能。您可以模拟对iframe的点击,但它只会沿包含文档的方向传播。所包含的文档中的任何内容都不会受到影响(出于非常明显的安全原因)。
Andy E

67

是的,您可以通过创建事件并调度它来模拟鼠标单击:

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()做正确的事情,但尚未确认。


使我免于一团糟。我最初的方法失败了,但是谢谢您的帮助。
iChux

3
plus1用于不使用jQuery。与公认的答案相反,该答案的确回答了这个问题。
tomekwi 2014年

1
这是多少,比jQuery的功能更加强大$.click()
史蒂芬路


3
initMouseEvent可以使用代替过时的方法,var event = new MouseEvent( "click", { clientX: x, clientY: y, bubbles: true } )它也可以在stackoverflow.com/a/36144688/384670中显示
卡兹

28

这只是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);
}

0

它确实为我工作,但它将正确的元素打印到控制台

这是代码:

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

-2

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

您要完成什么?


@Aicule:感谢您让我知道!我将向该问题添加一些信息。我只是在尝试,什么都没有真正
发挥作用

2
在Chrome和Safari中,您可以在特定的x,y位置触发点击。此演示就是这样工作的。Firefox是唯一失败的浏览器,因此也许这是特定于Firefox的安全策略。
thdoan

真理在于下面的答案,createEvent()+initMouseEvent()
Valer

1
以我为例,进行测试。
Jose Nobile

您可以肯定地模拟具有特定X / Y坐标的点击,尽管其行为可能不完全相同。
Agamemnus
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.