>  기사  >  웹 프론트엔드  >  js는 클릭 이벤트를 시뮬레이션합니다.

js는 클릭 이벤트를 시뮬레이션합니다.

一个新手
一个新手원래의
2017-09-25 09:53:575164검색

페이지가 로드된 후 연결 문제가 자주 발생합니다. 이때, 후속 링크가 웹 페이지에 표시될 수 있도록 페이지가 로드된 후 첫 번째 클릭 이벤트가 자동으로 트리거되도록 해야 합니다.
js

$("selector").trigger("click");

에서

trigger 메소드를 사용할 수 있습니다. 예를 들어 제 코드에서는 먼저 ul의 li에 클릭 이벤트를 추가한 다음 이 이벤트 트리거를 시뮬레이션했습니다.

    $(".place-classify ul").on("click","li",function(){
        var placeName = $(this).html();
       createPlaceContent(placeName) ;
    });
    $(".place-classify ul li:first-child").trigger('click');

그러나 시뮬레이션된 이벤트가 실행되지 않는 경우가 있습니다. 일반적으로 두 가지 문제가 발생할 수 있습니다.

  1. 시뮬레이트된 클릭 이벤트가 클릭 이벤트 앞에 작성됩니다.
    어떤 사람들은 이것이 페이지가 로드된 후에 트리거된다고 생각합니다. 특히 $(function(){});로 작성된 경우 먼저 렌더링된 다음 트리거되지만 페이지가 열리면 전체 페이지가 먼저 렌더링됩니다. js 코드가 아닌 페이지의 요소가 하나씩 실행됩니다. 시뮬레이션된 클릭이 앞에 작성되면 먼저 트리거된 후 선언되므로 아무 것도 발생하지 않습니다. 효과를 클릭 이벤트 뒤로 이동하면 됩니다. $(function(){});当中就是先渲染在触发,但是一个页面打开先渲染的是整个页面的元素,而不是js代码,js代码还是会一条条的往下执行,那么把模拟点击写在前面的话就是先触发再声明,所以没有效果,把他移到点击事件的后面就可以了。

  2. 已经把点击事件移到了后面但还是没有触发,那么可能是异步加载的原因,由于你的网页是异步加载那么由于数据还没有处理完你就发生了点击事件,同样的道理,动态生成的元素都还没有生成,就触发了点击事件。办法就是把ajax请求改为同步请求。$.ajax({ <br>        url:url, <br>        data:data, <br>        async:false, <br>        success:function(result){ <br>            handle(result); <br>        }, <br>        error:function(result){ <br>            alert("获取数据失败"); <br>        } <br>    });

클릭 이벤트가 뒤로 이동했지만 아직 실행되지 않아 비동기 로딩 때문일 수 있습니다. 웹 페이지가 비동기적으로 로드되므로 데이터가 아직 처리되지 않았기 때문에 클릭 이벤트가 발생합니다. 원칙은 동적에 적용됩니다. 생성된 요소가 생성되기 전에 클릭 이벤트가 트리거되었습니다. 해결책은 ajax 요청을 동기 요청으로 변경하는 것입니다. $.ajax({ 🎜 url:url, 🎜 데이터:데이터, 🎜 비동기:거짓, 🎜 ~ ~                           성공:기능(결과){ 🎜               처리(결과); }, 🎜 ​ ​ 오류:함수(결과){ 🎜 Alert("데이터를 가져오지 못했습니다.") 🎜       } 🎜 });🎜🎜🎜

위 내용은 js는 클릭 이벤트를 시뮬레이션합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.