如何在JavaScript中使用x，y坐标模拟点击？

Question

在网页中，是否有可能使用给定的坐标来模拟JavaScript中的点击事件？

- RadiantHex

---

你的目标是什么？:) 你是想模拟点击一个图像地图吗？ - Nick Craver

Answer 1

你可以派发一个click事件，但这不等同于真正的点击。例如，它不能用于欺骗跨域iframe文档，让其以为被点击了。

所有现代浏览器都支持 document.elementFromPoint 和 HTMLElement.prototype.click()，至少从 IE 6、Firefox 5、任何版本的 Chrome 开始，还有可能是您关心的任何版本的 Safari。它甚至可以跟随链接和提交表单：

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

• https://developer.mozilla.org/zh-CN/docs/Web/API/Document/elementFromPoint
• https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/click

- Andy E

---

@RadiantHex：是的，事实上IE是第一个实现它的浏览器，这可以追溯到IE6时代。Chrome、Firefox和Safari 5的实现都很好，但Safari 4和Opera的实现是不正确的（虽然可行）。请参见http://www.quirksmode.org/dom/w3c_cssom.html#documentview。 - Andy E

我对这个发现感到非常高兴!! =D 现在许多被认为不可能的事情都变得可能了 =) ... 或者至少不那么复杂了。谢谢!! - RadiantHex

这似乎不能与$.live()事件一起使用，有人知道如何使其与使用$.live()创建的事件一起工作吗？ - ActionOwl

@AndyE，现在这个功能可在以下情况下使用：我有一个网页，我正在从与我的域不同的另一个域加载Iframe。而且我想在iframe区域点击。您是否有相关解决方案？ - Parixit

@parixit：不可能的。你可以模拟点击iframe，但它只会向上传播至包含的文档。对于非常明显的安全原因，被包含的文档不会受到影响。 - Andy E

Answer 2

是的，您可以通过创建事件并分派它来模拟鼠标点击：

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

- user663031

---

救了我一命。我的初始方法失败了，但这个方法拯救了我，谢谢。 - iChux

加1分，因为没有使用jQuery。与被接受的答案相反，这个答案确实回答了问题。 - tomekwi

这比jQuery的$.click()强大得多。 - Steven Lu

initMouseEvent已被弃用：https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/initMouseEvent - vikeri

你可以使用var event = new MouseEvent( "click", { clientX: x, clientY: y, bubbles: true } )代替已经不再使用的 initMouseEvent。这个方法也在https://dev59.com/rXA75IYBdhLWcg3weY5f#36144688中有说明。 - M Katz

Answer 3

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

- user2067021

Answer 4

对我来说它不起作用，但它将正确的元素打印到控制台。

这是代码：

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

- VilgotanL

---

这段话的意思是：“这句话对回答没有任何作用。”它出现在Stack Overflow上这个回答（https://dev59.com/rXA75IYBdhLWcg3weY5f#36144688）中。 - Nicolas Boisteault

Answer 5

出于安全考虑，您无法使用JavaScript移动鼠标指针，也无法模拟鼠标单击。

您想要实现什么目标？

- quantumSoup

---

@Aicule：谢谢你让我知道！我会在问题中添加一些信息。我只是在进行实验，没有什么真正的生产力 =) - RadiantHex

在Chrome和Safari中，您可以在特定的x，y位置触发单击。这就是此演示文稿的工作原理。Firefox是唯一失败的浏览器，因此可能是Firefox特定的安全策略。 - thdoan

真相在下面的答案中，createEvent() + initMouseEvent()。 - Valer

在我的情况下，测试。 - Jose Nobile

你肯定可以模拟一个带有特定 X/Y 坐标的点击，尽管它不会完全表现相同。 - Agamemnus