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

问题描述 投票:0回答:6

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

javascript jquery html mouseevent mouseclick-event
6个回答
201
投票

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

所有现代浏览器都支持

document.elementFromPoint
HTMLElement.prototype.click()
,因为至少 IE 6、Firefox 5、任何版本的 Chrome 以及您可能关心的任何版本的 Safari。 它甚至会跟踪链接并提交表格:

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

86
投票

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

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()
实现是正确的,但尚未证实。


49
投票

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

3
投票

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

这是代码:

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

0
投票

这些都是很好的解决方案,但它们仅仅提供了必要功能的基础。 实际上,如果您想以通用方式触发逐像素点击,您会遇到许多问题:

  • document.elementFromPoint
    不一定是您要点击的真正目标元素。
  • 数组版本
    document.elementsFromPoint
    将返回整个 DOM 树中该点上的所有元素,但随后您需要找到正确的元素。
  • 为了判断点击是否有效,您需要观察页面/元素是否发生变化。
  • 等等。 每个步骤本身都很复杂,需要仔细关注。这种复杂性可能解释了上述响应中的大量失败。如果有人想出一个很好的片段/库,并且以可靠的方式完成它 - 我很乐意测试它。

-5
投票

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

您想要实现的目标是什么?

© www.soinside.com 2019 - 2024. All rights reserved.