source

href 요소에서 클릭 이벤트를 트리거하는 방법

factcode 2023. 9. 6. 22:24
반응형

href 요소에서 클릭 이벤트를 트리거하는 방법

아래와 같이 jQuery와 하이퍼링크에서 클릭 이벤트를 트리거하려고 합니다.하이퍼링크에는 ID가 없지만 CSS 클래스가 있습니다.

$(document).ready(function () {  
  $('.cssbuttongo').trigger('click'); 
}); 

위의 기능이 작동하지 않습니다.하이퍼링크입니다.

<a href="hyperlinkurl" class="cssbuttongo">hyperlink anchor</a>

네이티브 DOM 메서드는 올바른 작업을 수행합니다.

$('.cssbuttongo')[0].click();
                  ^
              Important!

이것은 작동 여부에 관계없이 작동합니다.href는 URL, 프래그먼트(예:#blah) 또는 심지어는javascript:.

이것은 DOM을 호출합니다.clickjQuery 대신 메서드click(매우 불완전하고 완전히 무시하는 방법)href).

나는 이것을 증명할 사실적인 증거가 없지만 이미 이 문제에 부딪쳤습니다.에 클릭() 이벤트가 발생하는 것 같습니다.<a>태그는 입력 버튼과 같은 방식으로 동작하지 않는 것 같습니다.

제가 사용한 해결책은 위치를 정하는 것이었습니다.브라우저가 다음과 같이 요청 리소스를 로드하도록 하는 창의 href 속성:

$(document).ready(function()
{
      var href = $('.cssbuttongo').attr('href');
      window.location.href = href; //causes the browser to refresh and load the requested url
   });
});

편집:

저는 js fiddle을 만들겠지만 jsfiddle이 코드를 렌더링하기 위해 iframe을 사용하는 방법과 혼합된 질문의 특성은 그것을 방해합니다.

롬킨즈의 훌륭한 답변 외에도..여기 관련 서류/서류가 있습니다.


DOM Elements에는 기본 메서드가 있습니다.

HTMLElement.click()method는 요소에 마우스 클릭을 시뮬레이션합니다.

클릭을 사용하면 문서 트리(또는 이벤트 체인) 위쪽에 있는 요소까지 버블링하는 요소의 클릭 이벤트도 실행되고 해당 요소의 클릭 이벤트도 실행됩니다.그러나 클릭 이벤트를 버블링하면 실제 마우스 클릭이 수신된 것처럼 요소가 탐색을 시작하지 않습니다.(mdn 참조)

관련 W3 설명서.


몇가지 예를 들자면..

  • jQuery 개체에서 특정 DOM 요소에 액세스할 수 있습니다. (예)

      $('a')[0].click();
    
  • 메서드를 사용하여 jQuery 개체에서 DOM 요소를 검색할 수 있습니다. (예)

      $('a').get(0).click();
    
  • 역시 DOM 요소를 선택하고 메소드를 호출할 수 있습니다.(주로)

      document.querySelector('a').click();
    

jQuery가 네이티브 이벤트를 트리거할 필요가 없다는 점을 지적할 필요가 있습니다.

자바스크립트를 통해 클릭을 트리거하면 하이퍼링크가 열리지 않습니다.이것은 브라우저에 내장된 보안 조치입니다.

그러나 몇 가지 해결 방법에 대해서는 이 질문을 참조하십시오.

여러분들께 알려드리고 싶은 것은, 받아들여진 대답이 항상 효과가 있는 것은 아니라는 것입니다.

실패하는 예가 있습니다.

한다면<href='/list'>

href = $('css_selector').attr('href')
"/list"
href = document.querySelector('css_selector').href
"http://localhost/list"

아니면 jQuery에서 받은 href를 여기에 추가할 수 있습니다.

href = document.URL +$('css_selector').attr('href');

또는 jQuery way

href = $('css_selector').prop('href')

마지막으로 브라우저 현재 페이지의 url을 변경하기 위해 호출합니다.

window.location.href = href

또는 사용하여 불쑥 튀어나오게 합니다.window.open(url)

JSFiddle의 예는 다음과 같습니다.

링크가 아닌 버튼을 클릭하는 방법에 대해서도 비슷한 문제를 겪고 있었습니다..trigger('클릭') 또는 [0.click()] 메서드에서 성공하지 못했고, 그 이유를 알 수 없었습니다.마침내 다음이 저에게 도움이 되었습니다.

$('#elementid').mousedown();

언급URL : https://stackoverflow.com/questions/7999806/how-to-trigger-click-event-on-href-element

반응형