Как смоделировать щелчок, используя координаты x, y в JavaScript?

96

Можно ли использовать заданные координаты для имитации щелчка в JavaScript на веб-странице?

RadiantHex
источник
2
Какая у тебя цель? :) Вы пытаетесь имитировать, например, щелчок по карте изображения?
Ник Крейвер

Ответы:

151

Вы можете отправить событие щелчка , хотя это не то же самое, что настоящий щелчок. Например, его нельзя использовать, чтобы обмануть междоменный документ iframe, заставив думать, что по нему щелкнули.

Все современные браузеры поддерживают document.elementFromPointи HTMLElement.prototype.click(), по крайней мере, IE 6, Firefox 5, любую версию Chrome и, возможно, любую версию Safari, которая может вам понравиться. Он даже будет переходить по ссылкам и отправлять формы:

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

https://developer.mozilla.org/En/DOM:document.elementFromPoint https://developer.mozilla.org/en-US/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 02
1
Это намного, намного мощнее, чем jQuery$.click()
Стивен Лу
7
initMouseEventустарел: developer.mozilla.org/en-US/docs/Web/API/MouseEvent/…
vikeri
3
Вместо устаревшего initMouseEventвы можете использовать var event = new MouseEvent( "click", { clientX: x, clientY: y, bubbles: true } )Это также показано в stackoverflow.com/a/36144688/384670 .
M Katz
28

Это просто ответ торазабуро , обновленный для использования объекта 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
источник
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 или имитировать с его помощью щелчок.

Чего вы пытаетесь достичь?

QuantumSoup
источник
@Aicule: спасибо, что сообщили мне! Я добавлю немного информации к вопросу. Я просто экспериментирую, ничего особо продуктивного =)
RadiantHex
2
В Chrome и Safari вы можете щелкнуть мышью в определенной позиции x, y. Вот как работает эта демонстрация . Firefox - единственный браузер, в котором он не работает, так что, возможно, это политика безопасности, специфичная для Firefox.
thdoan
Истина заключается в ответе ниже, createEvent()+initMouseEvent()
Валер
1
В моем случае тестирование.
Хосе Нобиле
Вы определенно можете имитировать щелчок с определенными координатами X / Y, хотя это не будет вести себя точно так же.
Agamemnus