ProgramingTip

JavaScript의 요소를 프로그래밍 방식으로 클릭하면 얼마나 많이 사용합니까?

bestdevel 2020. 12. 14. 20:36
반응형

JavaScript의 요소를 프로그래밍 방식으로 클릭하면 얼마나 많이 사용합니까?


IE에서는 JavaScript에서 element.click ()을 호출 할 수 있습니다. Firefox에서 필요한 작업을 수행해야합니까? 이상적으로는 브라우저 간 똑같이 잘 작동하는 JavaScript를 갖고 싶지만 필요한 경우 브라우저가 다른 JavaScript를 사용합니다.


document.createEvent문서 "라고 말한다 CreateEvent에 에의 방법은 사용되지 않습니다. 사용 이벤트 생성자 대신. "

따라서 대신이 방법을 많이 사용합니다.

var clickEvent = new MouseEvent("click", {
    "view": window,
    "bubbles": true,
    "cancelable": false
});

다음과 같은 요소에서 실행됩니다.

element.dispatchEvent(clickEvent);

여기에 딱대로 .


파이어 폭스의 경우 링크는 "특별한"것으로 보입니다. 이 작업을 수행 할 수있는 유일한 방법은 MDN에서 여기에 설명 된 createEvent를 사용 하고 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;
    }
}


jQuery사용하면 다음과 같이 똑같은 일을 할 수 있습니다.

$("a").click();

페이지의 모든 앵커를 "클릭"합니다.


element.click ()은 W3C DOM 사양에 설명 된 표준 메소드 입니다. Mozilla의 Gecko / Firefox 는 표준을 준수 며 메소드가 INPUT 요소 호출을 허용합니다.


실제로 링크를 만들거나 onclick을하려고 시도 했습니까? 다음과 같이 onclick을 트리거 할 수 있습니다.

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" />

// 자바 스크립트에서

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

나는 검색을했고 많은 제안을 시도했지만 이것이 결국 작동했습니다. 시간이 좀 더 있었다면 제출이 IE에서 FF와 버튼으로 작동하는 이유를 조사하고 싶었지만 지금은 다음 문제에 대한 사치가 될 것입니다.

참고 URL : https://stackoverflow.com/questions/809057/how-do-i-programmatically-click-on-an-element-in-javascript

반응형