JavaScript로 클릭을 시뮬레이션하는 방법은 무엇입니까?


293

JavaScript를 사용하여 요소에 대한 클릭을 시뮬레이션하는 방법이 궁금합니다.

현재 나는 :

<script type="text/javascript">
function simulateClick(control)
{
    if (document.all)
    {
        control.click();
    }
    else
    {
        var evObj = document.createEvent('MouseEvents');
        evObj.initMouseEvent('click', true, true, window, 1, 12, 345, 7, 220, false, false, true, false, 0, null );
        control.dispatchEvent(evObj);
    }
}
</script>

<a href="http://www.google.com" id="mytest1">test 1</a><br>

<script type="text/javascript">
    simulateClick(document.getElementById('mytest1'));
</script>

그러나 작동하지 않습니다 :(

어떤 아이디어?


9
"가장 일반적인 코딩 오류 5 개": javascript.about.com/od/hintsandtips/a/worst_4.htm- 더 이상 IE4를 실행하는 사람이 거의 없으므로 문서를 지원하지 않습니다. 모든 DOM이 더 이상 필요하지 않습니다. 얼마나 많은 사람들이 여전히 코딩에 사용하고 있는지는 놀랍습니다. 더 나쁜 것은 문서에 대한 지원입니다. 모든 DOM은 사용중인 브라우저를 결정하기 위해 종종 테스트되며, 지원되는 경우 코드는 브라우저가 Internet Explorer라고 가정합니다 ( 오페라Opera 가 DOM을 인식하기 때문에 완전히 잘못된 사용법 임) .
zaf

답변:


418

내가 요리 한 것입니다. 꽤 간단하지만 작동합니다.

function eventFire(el, etype){
  if (el.fireEvent) {
    el.fireEvent('on' + etype);
  } else {
    var evObj = document.createEvent('Events');
    evObj.initEvent(etype, true, false);
    el.dispatchEvent(evObj);
  }
}

용법:

eventFire(document.getElementById('mytest1'), 'click');

12
@ 앤더슨 그린 : 나는이 jsfiddle에 예를 추가했습니다 : jsfiddle.net/KooiInc/W4BHD
KooiInc

4
이것이 작동한다는 증거 (크로뮴에서) : +1 with document.querySelector('[value="2706236"]').nextSibling.nextSibling.dispatchEvent(ev);:)
PointedEars

58
그럼 난 버튼 (:)의 코스 일)까지 투표에 자바 스크립트를 시도
0fnt

1
정확한 사용자 동작을 시뮬레이션하기 위해, 당신은 포장한다 dispatchEvent또는 click로 호출을 setTimeout하면 해당가 나타납니다, dispatchEvent이다 동기 .
Lev Kazakov

16
Event.initEvent지금은 사용되지 않는 developer.mozilla.org/en/docs/Web/API/Event/initEvent을
artnikpro

394

다음과 같은 간단한 것은 어떻습니까?

document.getElementById('elementID').click();

IE에서도 지원 됩니다.


@HermannIngjaldsson 네, 그것은 IE에서 완벽하게 작동 - msdn.microsoft.com/en-us/library/ie/ms536363%28v=vs.85%29.aspx
대런 스위니

6
문제는 "즉, 작동합니까?"였습니다. -대답은 그렇습니다-AFAIK는 최소 8 세까지, 7 점은 체크하지 않았습니다
Darren Sweeney

24
이것이 전에 존재하지 않았습니까? 2010 년 답변에 왜이 간단한 해결책이 언급되지 않았습니까? 그냥 궁금해서 ...
Parth

3
@ NinoŠkopac 현재 데스크톱에서는 잘 작동하지만 모바일 브라우저에서는 작동하지 않을 수도 있습니다. 모질라 개발자 사이트조차도 모바일 지원을 보여주지 않습니다.
le0diaz

8
@Parth 어쩌면 클릭 하지 않았을 수도 있습니다.
Andrew

78

모든 브라우저 감지를 피하기 위해 jQuery 사용을 고려 했습니까? jQuery를 사용하면 다음과 같이 간단합니다.

$("#mytest1").click();

21
이것은 기본 동작이 아닌 jQuery 이벤트 핸들러 만 실행합니다 (이 경우 브라우저는 href로 이동)
Romuald Brunet

12
나는 슬프다는 것을 모르지만 동일한 브라우저 감지 루틴을 계속 반복해서 코딩하지 않아도되는 것이 편리 할 수 ​​있습니다.
BradBrening 2016 년

9
@ErikAigner : 똑같은 궁금하지만이 경우 허용되는 답변이 일반 JavaScript이며 jQuery가 아니라는 것이 기쁩니다. 그래서 너무 많은 시간을 보았습니다. 한 번 더 : jQuery는 JavaScript이지만 JavaScript는 jQuery가 아닙니다. jQuery를 사용하고 싶지만 개발자가 실제 일반 사항을 이해하지 못하는 것으로 점점 더 많이보고 있습니다. 내 2 센트는 논평에 저항 할 수 없었다. ;)
Sander

58
또한 대부분의 가정은 세탁기를 소유하고 거의 대부분은 옷 건조기를 가지고 있기 때문에 옷을 손으로 씻어야한다면 어디서부터 시작해야할지 모르는 많은 사람들이 있습니다. 최신 어플라이언스와 마찬가지로 jQuery는 오래된 작업을 훨씬 쉽고 오류가 덜 발생하도록 만들었습니다. 그러나 크로스 브라우저와 호환되는 동안 더 간결하고 이해하기 쉬운 구문을 사용하여 질문에 정확하게 답변하는 답변을 다운 투표하는 것은 모든 사람을위한 솔루션이 아닙니다. +1.
FreeAsInBeer

2
@FreeAsInBeer 그러면 운전이 훨씬 쉬워서 어디를 가면 안됩니다. 그러나 우리는 그것이 어리 석다는 것을 알고 있습니다. 멀리 갈 필요가 없으면 걷습니다. 간단한 작업이 필요하고 전체 라이브러리를로드하지 않으려는 경우 일반 JavaScript를 사용합니다. 간단한 것을 위해 가스 / 대역폭을 낭비 할 필요가 없습니다.
Jacob Alvarez

18
var elem = document.getElementById('mytest1');

// Simulate clicking on the specified element.
triggerEvent( elem, 'click' );

/**
 * Trigger the specified event on the specified element.
 * @param  {Object} elem  the target element.
 * @param  {String} event the type of the event (e.g. 'click').
 */
function triggerEvent( elem, event ) {
  var clickEvent = new Event( event ); // Create the event.
  elem.dispatchEvent( clickEvent );    // Dispatch the event.
}

참고


나는이 요즘 최고의 답을해야한다 생각
DavidTaubmann

15

jQuery를 사용하면 많은 공간을 절약 할 수 있습니다. 다음을 사용해야합니다.

$('#myElement').trigger("click")

10
OP가 JavaScript를 요청했습니다. 이것은 컴팩트하고 기능적이지만 일부 사람들은 jQuery와 같은 것보다 라이브러리없는 JS를 선호합니다.
시체

43
jquery를 다운로드하여 공간을 절약 하시겠습니까?
MH

9
어떤 사람들은 집회를 선호합니다.
Dan Nissenbaum

@MH 더 유효한 주장은 "단순하게 유지하는 것"이라고 생각합니다. SO의 기본 프로필은 jQuery와 거의 같은 크기입니다.
adelriosantiago

7

최고 답변이 최고입니다! 그러나 Firefox에서 마우스 이벤트가 발생하지 않았습니다 etype = 'click'.

그래서, 나는 변화 document.createEvent'MouseEvents'그 문제를 해결했습니다. 추가 코드는 다른 코드 비트가 이벤트를 방해하는지 여부를 테스트하는 것이며 취소 된 경우 콘솔에 기록합니다.

function eventFire(el, etype){
  if (el.fireEvent) {
    el.fireEvent('on' + etype);
  } else {
    var evObj = document.createEvent('MouseEvents');
    evObj.initEvent(etype, true, false);
    var canceled = !el.dispatchEvent(evObj);
    if (canceled) {
      // A handler called preventDefault.
      console.log("automatic click canceled");
    } else {
      // None of the handlers called preventDefault.
    } 
  }
}

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.