JavaScript는 사용자 클릭 event_javascript 기술을 시뮬레이션합니다.

처음에는 하이퍼링크의 클릭 이벤트(trigger("click")와 동일한 효과)를 트리거하기 위해 jQuery의 click() 이벤트를 사용하는 것을 생각했습니다. 결과는 만족스럽지 못한 것으로 확인되었습니다.

예제는 다음과 같습니다.
렌더링
IE:

FireFox:

코드 복사 코드는 다음과 같습니다.

< ;h3>'클릭하세요'를 클릭해 주세요. 제출 버튼과 하이퍼링크도 클릭되는지 테스트합니다.   나를 클릭하세요

 
 

코드가 하이퍼링크를 트리거합니다

코드 복사 코드는 다음과 같습니다.

$(function()

{
$("#btn").click(function()
{
$ ("#submit").click();
         $("#aLink")     .click();                    : 나 버튼을 클릭하면 제출 버튼이 클릭되었고 하이퍼링크가 연속적으로 클릭되었음을 나타내는 대화 상자 팝업은 두 항목 모두의 클릭 이벤트가 트리거되었음을 나타냅니다. 그러나 제출 버튼의 클릭 이벤트가 트리거된 후 기본 동작을 수행하는 것을 주소 표시줄에서 볼 수 있습니다. 즉, 양식을 제출하지만 하이퍼링크의 클릭 이벤트가 트리거된 후에는 대상에 연결되지 않습니다. 주소. (제출 버튼의 제출 주소가 하이퍼링크에 영향을 미친다는 점은 의심하지 마세요. 제출 버튼을 없애고 하이퍼링크만 남겨두면 대상 주소로 연결되지 않기 때문입니다.)

아마도 jQuery의 click() 메서드 하이퍼링크의 클릭 이벤트는 브라우저의 기본 동작을 수행하지 않습니다(수동으로 return true를 추가하더라도 쓸모가 없습니다). 참고: tigger("click")은 click()과 동일합니다. jQuery 문서에는 "이 함수는 또한 동일한 이름의 브라우저 기본 동작이 실행되도록 합니다."라고 나와 있습니다. 같은 이름을 가진 사람? 잘 이해가 안 되지만 하이퍼링크는 실제로 기본 동작을 수행할 수 없습니다. 이것이 jQuery에서 제공하는 이벤트를 포기하는 유일한 다른 방법입니다.

자바스크립트 자체 이벤트로 돌아가기 - 클릭하세요. 코드는 다음과 같습니다.

코드 복사


코드는 다음과 같습니다.

$(function () { $("#btn").click(function() { $("#submit").click();

$("#aLink" ).get(0) .click();

});
});


IE에서 테스트를 거쳐 통과했습니다. 그러나 fireFox에서는 다음과 같은 메시지가 표시됩니다. click()은 함수가 아닙니다. 솔직히 말해서 IE 브라우저는 개발자에게 매우 좋은 기능을 제공하지만 앞서 언급한 onpropertychange와 같이 fireFox는 그렇지 않습니다. 그러나 IE 이외의 브라우저도 고려해야 합니다. 인터넷에서 정보를 검색한 후, 많은 사람들이 fireFox에서 이벤트를 실행하기 위해 코드를 사용하려면 다음 처리가 필요하다고 언급했습니다.




코드 복사

코드는 다음과 같습니다.

var evt = document.createEvent("MouseEvents") evt.initEvent("click", false, false);// 또는 initMouseEvent()를 사용하지만 더 많은 매개변수가 필요합니다. $("#aLink").get(0).dispatchEvent(evt)

원하는 기능을 얻으려면 위의 방법을 따르세요. , 코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

$(function()
{
$("#btn").click(function()
{
$("#submit").click();

if($.browser.msie)
{
$("#aLink").get(0).click()
else
{
var evt = document.createEvent("MouseEvents");
evt.initEvent("click", false, false)
$("#aLink").get(0).dispatchEvent(evt ); >       }
     })
}); 그러나 fireFox의 상황은 jQuery의 click() 이벤트를 직접 사용하는 것과 동일합니다. click 이벤트가 트리거될 수 있지만 하이퍼링크가 대상 주소로 이동하지 않습니다(참고: 제출 버튼도 이 방법을 사용하여 제출할 수 있습니다. jQuery의 클릭을 원합니다. ()의 구현은 아마도 다음과 같이 구현될 것입니다. 제 생각에는 IE가 더 나은 것 같아요. 헤헤.

결과적으로 이 방법으로는 여전히 FireFox의 문제가 해결되지 않습니다. 계속해서 다른 방법을 찾아야 합니다.

fireFox에서는 클릭 이벤트가 발생할 수 있지만 하이퍼링크의 대상 주소로 이동할 수 없으므로 js를 사용하여 점프, 즉 위치 개체를 사용할 수 있습니다. 코드는 다음과 같습니다.




코드 복사

코드는 다음과 같습니다. $(function () { $("#btn").click(function()

{

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

if($ .browser.msie)
              { 🎜>        $( "#aLink").click(function()
    {
      document.location = $(this).attr("href");// window .location = $(this).attr("href" ); 가능하지만 실행 시간이 다릅니다
      })
}); 끝났어. 설명할 곳이 있습니다: document.location 및 window.location. 둘 다 괜찮지만 실행 시간이 다르고 창 실행 시간이 더 빠릅니다. 독자들이 직접 시도해 볼 수 있습니다.

이 예제를 구현했지만 프로젝트에서 프레임셋을 사용했기 때문에 프로젝트에 적용할 때 문제가 있었습니다. 사용합니다.) 이렇게 해야 합니다. 따라서 링크의 대상 URL이 표시되는 프레임을 지정해야 합니다. 그러나 의 대상을 통해 이를 수행할 수 없습니다. 왜냐하면 js를 통해 구현해야 합니다.

우리는 문서가 현재 페이지(현재 실행 요소가 위치한 페이지)를 나타낸다는 것을 알고 있습니다. 현재 하이퍼링크 URL이 삽입하려는 프레임을 찾을 수 있으면 해당 개체의 문서를 찾을 수 있습니다. 물론, 하이퍼링크 URL을 넣을 프레임을 찾는 것은 쉽습니다. 어디에 넣을지는 사용자의 몫입니다. 샘플 코드는




코드 복사


코드는


window. parent.frames['view'].document.location = $("#aLink").attr("href")


그 중 'view'는 하이퍼링크 URL이 들어가고자 하는 프레임의 이름이나 id입니다(id와 이름이 같은 것이 가장 좋습니다). IE에서는 위의 방법을 사용하지 않고, 앞서 소개한 click() 메소드를 사용하는 것을 권장합니다.

이제 모든 문제가 해결되었습니다. 어떤 사람들은 여전히 ​​이러한 요구를 가질 수 있습니다: 등과 같이 에 대상을 작성하세요. 대상의 요구 사항에 따라 하이퍼링크가 실행되기를 바랍니다. 물론 이는 IE가 아닌 브라우저의 문제입니다.

사실 제가 아래에서 소개해드릴 방법은 보편적입니다. window.parent.frames['view'].document.location으로 대체될 수 있습니다. 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

window.open ($(this).attr("href"),$(this).attr("target"));

target 속성이 정의되지 않은 경우 '_blank로 처리됩니다. '는 기본적으로 사용자가 하이퍼링크를 클릭하는 것과는 다른 효과가 있습니다. 이 방법은 크로스 브라우저이므로 이 방법만 사용하면 됩니다. 이때는 다시 jQuery 원본 JavaScript를 사용하여 구현하는 것이 궁극적으로 가장 좋은 방법이라고 생각합니다. 전체 최종 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

    
    
    


& lt; h3 & gt; 请单击 请单击”클릭을 클릭하십시오. 버튼>
    

         "submit" type="submit" value="别点击此按钮提交" onclick="alert('触发了提交按钮的单击事件!');"/>
    

代码触发超链接