웹 프론트엔드 JS 튜토리얼 js는 클릭 이벤트를 시뮬레이션합니다.

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

Sep 25, 2017 am 09:53 AM
javascript 이벤트 딸깍 하는 소리

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

1

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

로그인 후 복사

에서

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

1

2

3

4

5

$(".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으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법 WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법 Dec 17, 2023 pm 02:54 PM

WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법

WebSocket 및 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 WebSocket 및 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 Dec 17, 2023 pm 05:30 PM

WebSocket 및 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술

JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법 JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법 Dec 17, 2023 pm 12:09 PM

JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법

간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법 간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법 Jan 05, 2024 pm 06:08 PM

간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법

JavaScript와 WebSocket: 효율적인 실시간 일기예보 시스템 구축 JavaScript와 WebSocket: 효율적인 실시간 일기예보 시스템 구축 Dec 17, 2023 pm 05:13 PM

JavaScript와 WebSocket: 효율적인 실시간 일기예보 시스템 구축

JavaScript에서 HTTP 상태 코드를 쉽게 얻는 방법 JavaScript에서 HTTP 상태 코드를 쉽게 얻는 방법 Jan 05, 2024 pm 01:37 PM

JavaScript에서 HTTP 상태 코드를 쉽게 얻는 방법

jQuery에서 선택 요소의 변경 이벤트 바인딩을 구현하는 방법 jQuery에서 선택 요소의 변경 이벤트 바인딩을 구현하는 방법 Feb 23, 2024 pm 01:12 PM

jQuery에서 선택 요소의 변경 이벤트 바인딩을 구현하는 방법

PHP를 사용하여 이벤트 기반 애플리케이션을 구축하는 방법 PHP를 사용하여 이벤트 기반 애플리케이션을 구축하는 방법 May 04, 2024 pm 02:24 PM

PHP를 사용하여 이벤트 기반 애플리케이션을 구축하는 방법

See all articles