JavaScript에서 x, y 좌표를 사용하여 클릭을 시뮬레이션하는 방법은 무엇입니까?


93

웹 페이지 내에서 자바 스크립트 클릭을 시뮬레이션하기 위해 주어진 좌표를 사용할 수 있습니까?


2
당신의 목표는 무엇입니까? :) 예를 들어 이미지 맵에 대한 클릭을 시뮬레이션하려고합니까?
Nick Craver

답변:


145

당신은 전달할 수 있습니다 클릭 이 실제 클릭과 같은 아니지만, 이벤트를. 예를 들어, 교차 도메인 iframe 문서가 클릭되었다고 생각하도록 속이는 데 사용할 수 없습니다.

모든 최신 브라우저 지원 document.elementFromPointHTMLElement.prototype.click()적어도 IE 6, 파이어 폭스 5, 당신은 가능성이있어 사파리 크롬의 모든 버전과 아마 모든 버전에 대한 신경 때문에. 링크를 따라 가고 양식을 제출합니다.

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로 돌아갑니다. 크롬, 파이어 폭스, 사파리 5 구현은 괜찮지 만 사파리 4와 오페라는 틀렸다. quirksmode.org/dom/w3c_cssom.html#documentview를 참조 하세요 .
Andy E

1
이 발견에 너무 기뻐 !! = D 불가능하다고 여겨지는 많은 것들을 지금 가능하게 만듭니다 =) ... 또는 적어도 덜 복잡합니다. 감사!!
RadiantHex

1
이것은 $ .live () 이벤트와 함께 작동하지 않는 것 같습니다. $ .live ()로 만든 이벤트에서도 작동하도록 만드는 방법이 있습니까?
ActionOwl 2011-08-30

1
@AndyE 현재 다음과 같은 조건에서 작동합니다. 웹 페이지가 있습니다. 내 도메인이 아닌 다른 도메인에서 Iframe을로드하고 있습니다. 그리고 iframe 영역을 클릭하고 싶습니다. 이것에 대한 해결책이 있습니까?
Parixit 2013-06-30

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 2014 년

3
jQuery를 사용하지 않는 경우 plus1. 허용 대답 반대로,이 사람은 않는 질문에 대답.
tomekwi

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 카츠

28

이것은 MouseEvent 객체를 사용하도록 업데이트 된 torazaburo의 답변 입니다.

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

보안상의 이유로 자바 스크립트로 마우스 포인터를 이동하거나 클릭을 시뮬레이션 할 수 없습니다.

달성하려는 것이 무엇입니까?


@Aicule : 알려 주셔서 감사합니다! 질문에 약간의 정보를 추가하겠습니다. 나는 단지 실험하고 있고, 정말로 생산적인 것은 없다 =)
RadiantHex 2010-07-18

2
Chrome 및 Safari에서는 특정 x, y 위치에서 클릭을 실행할 수 있습니다. 방법이다 이 데모가 작동합니다. Firefox는 실패하는 유일한 브라우저이므로 Firefox 관련 보안 정책 일 수 있습니다.
thdoan

아래의 대답에 진실 거짓말 createEvent()+initMouseEvent()
발레르

1
제 경우에는 테스트입니다.
Jose Nobile

정확히 같은 방식으로 작동하지는 않지만 특정 X / Y 좌표로 클릭을 확실히 시뮬레이션 할 수 있습니다.
Agamemnus
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.