JavaScript의 요소를 프로그래밍 방식으로 클릭하는 방법은 무엇입니까?
-
03-07-2019 - |
문제
즉, JavaScript에서 element.click ()을 호출 할 수 있습니다. Firefox에서 동일한 작업을 어떻게 수행합니까? 이상적으로는 크로스 브라우저 똑같이 잘 작동하는 JavaScript를 원하지만 필요한 경우 브라우저 당 JavaScript가 있습니다.
해결책
그만큼 document.createEvent
선적 서류 비치 "그만큼 Createevent 메소드는 더 이상 사용되지 않습니다. 사용 이벤트 생성자 대신에."
대신이 방법을 사용해야합니다.
var clickEvent = new MouseEvent("click", {
"view": window,
"bubbles": true,
"cancelable": false
});
다음과 같은 요소에 발사하십시오.
element.dispatchEvent(clickEvent);
보여진 바와 같이 여기.
다른 팁
Firefox 링크는 "특별한"것으로 보입니다. 내가이 일을 할 수있는 유일한 방법은 Createevent를 사용하는 것입니다. 여기 MDN에 설명되어 있습니다 그리고 initmouseevent 기능을 호출하십시오. 그조차도 완전히 작동하지 않았으므로 브라우저에 수동으로 링크를 열도록 지시해야했습니다 ...
var theEvent = document.createEvent("MouseEvent");
theEvent.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
var element = document.getElementById('link');
element.dispatchEvent(theEvent);
while (element)
{
if (element.tagName == "A" && element.href != "")
{
if (element.target == "_blank") { window.open(element.href, element.target); }
else { document.location = element.href; }
element = null;
}
else
{
element = element.parentElement;
}
}
요소 .click ()는 W3C DOM 사양. Mozilla의 Gecko/Firefox 표준을 따릅니다 이 방법을 입력 요소에서만 호출 할 수 있습니다.
실제로 링크를 따르거나 OnClick을 트리거하려고합니까? 다음과 같이 on 클릭을 트리거 할 수 있습니다.
var link = document.getElementById(linkId);
link.onclick.call(link);
다음은 크로스 브라우저 작업 기능입니다 (클릭 핸들러 이외의 다른 경우에는 사용할 수 있음) :
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);
}
}
위에 나열된 Kooiinc의 기능을 사용했지만 IE에는 두 가지 다른 입력 유형의 '버튼'과 Firefox에 '제출'을 사용해야했습니다. 왜 그런지 잘 모르겠지만 작동합니다.
// html
<input type="button" id="btnEmailHidden" style="display:none" />
<input type="submit" id="btnEmailHidden2" style="display:none" />
// JavaScript에서
var hiddenBtn = document.getElementById("btnEmailHidden");
if (hiddenBtn.fireEvent) {
hiddenBtn.fireEvent('onclick');
hiddenBtn[eType]();
}
else {
// dispatch for firefox + others
var evObj = document.createEvent('MouseEvent');
evObj.initEvent(eType, true, true);
var hiddenBtn2 = document.getElementById("btnEmailHidden2");
hiddenBtn2.dispatchEvent(evObj);
}
나는 검색을하고 많은 제안을 시도했지만 이것이 결국 작동하는 것입니다. 시간이 더 있었다면 제출이 왜 FF와 IE와의 버튼으로 작동하는지 조사하고 싶었지만 지금은 다음 문제에 대한 사치입니다.