【问题标题】:How to simulate a click by using x,y coordinates in JavaScript?如何在 JavaScript 中使用 x,y 坐标模拟点击?
【发布时间】:2011-03-17 16:23:10
【问题描述】:

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

【问题讨论】:

  • 你的目标是什么? :) 例如,您是否尝试模拟对图像地图的点击?

标签: javascript jquery html mouseevent mouseclick-event


【解决方案1】:

您可以发送 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
  • 我很高兴这个发现!! =D 使许多被认为不可能的事情现在成为可能 =) ... 或者至少不那么复杂。谢谢!!
  • 这似乎不适用于 $.live() 事件,有没有人如何使它也适用于使用 $.live() 创建的事件?
  • @AndyE 这现在在以下情况下工作:我有网页,我正在从另一个域而不是我的域加载 iframe。我想点击 iframe 区域。您对此有什么解决方案吗?
  • @parixit:不,这是不可能的。您可以模拟对 iframe 的单击,但它只会向上传播包含的文档。包含的文档中的任何内容都不会受到影响(出于非常明显的安全原因)。
【解决方案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 方法——它被广泛实施但不是标准的,并且会在例如幻影JS。我认为 jQuery 对 .click() 的实现是正确的,但尚未确认。

【讨论】:

  • 把我从一团糟中救了出来。我最初的方法失败了,但是这个方法来了,谢谢。
  • plus1 不使用 jQuery。与公认的答案相反,这个答案确实回答了这个问题。
  • 这比jQuery的$.click()强大得多
  • 您可以使用var event = new MouseEvent( "click", { clientX: x, clientY: y, bubbles: true } ),而不是已弃用的initMouseEvent,这也显示在stackoverflow.com/a/36144688/384670中。
【解决方案3】:

这只是 torazaburo's answer,已更新为使用 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);
}

【讨论】:

    【解决方案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);
    

    【讨论】:

    【解决方案5】:

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

    你想要完成什么?

    【讨论】:

    • @Aicule:谢谢你告诉我!我将在问题中添加一些信息。我只是在试验,没有什么真正有成效的 =)
    • 在 Chrome 和 Safari 中,您可以在特定的 x,y 位置触发点击。这就是this demo 的工作原理。 Firefox 是唯一失败的浏览器,因此可能是 Firefox 特定的安全策略。
    • 真相就在下面的答案中,createEvent() + initMouseEvent()
    • 在我的情况下,测试。
    • 您绝对可以模拟具有特定 X/Y 坐标的点击,尽管它的行为方式并不完全相同。
    猜你喜欢
    • 2012-05-05
    • 1970-01-01
    • 1970-01-01
    • 2021-03-11
    • 2020-07-19
    • 1970-01-01
    • 2022-01-07
    • 1970-01-01
    • 2016-07-29
    相关资源
    最近更新 更多