지역 사회
배우다
도구 라이브러리
AI 도구
여가
찾다
한국어
집 웹 프론트엔드 JS 튜토리얼 실행되는 jquery 트리거 함수에 대한 솔루션

실행되는 jquery 트리거 함수에 대한 솔루션

May 16, 2016 pm 03:13 PM
jquery 해결책

이 기사의 예에서는 jquery 트리거 함수를 두 번 실행하는 문제에 대한 해결 방법을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

1. 질문은 다음과 같습니다.

에는 다음 코드가 있습니다.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<style type="text/css">

*{margin:0;padding:0;}   

body { font-size: 13px; line-height: 130%; padding: 60px; }

p {width:200px;background:#888;color:white;height:16px;}

</style>

<script src="jquery-1.6.4.js" type="text/javascript"></script>

<script type="text/javascript">

$(function(){

  $('#old').bind("click", function(){

        $("input").trigger("focus");

    });

    $('#new').bind("click", function(){

      $("input").triggerHandler("focus");

    });

    $("input").focus(function(){

  $("body").append("<p>focus.</p>");

})

});

</script>

</head>

<body>

<button id="old">trigger</button>

<button id="new">triggerHandler</button>

<input />

</body>

</html>

로그인 후 복사

여기에 있는 기능:

1

2

3

$('#old').bind("click", function(){

$("input").trigger("focus");

});

로그인 후 복사

Firefox에서는 한 번만 실행됩니다. 즉, 포커스가 출력됩니다.

그러나 이는 두 번 트리거됩니다. 즉, 두 개의 초점이 동시에 출력됩니다.

2. 해결책:

먼저 트리거와 TriggerHandler를 분석합니다. TriggerHandler를 사용하면 브라우저의 기본 이벤트가 트리거되지 않으며 이벤트 버블링도 발생하지 않습니다(다른 차이점은 jQuery 문서 참조). 이 버그에 대한 티켓입니다. 이 문제에 전념하십시오. jQuery 자체는 브라우저 간의 차이점을 해결하기 위해 이벤트 개체를 구현합니다. 그러나 mouseenter/mouseleave와 같은 비표준 이벤트가 존재하기 때문에 jQuery는 네이티브 이벤트가 시뮬레이션된 이벤트의 이벤트 큐로 돌아갈 수 있도록 하는 특수 이벤트 하위 시스템을 도입했습니다. 그러나 이 시스템은 트리거를 사용할 때 모든 문제를 해결할 수 없습니다. .focus, IE에서는 콜백이 두 번 잘못 실행됩니다.

triggerHandler는 트리거와 관련된 이 문제에 대한 솔루션입니다. 그러나 TriggerHandler를 사용하면 입력에 커서 포커스 효과가 없다는 것을 알 수 있습니다.

초기 해결 방법:

triggerHandler를 사용하는 것 외에 또 다른 방법은 포커스 바인딩 이벤트에

을 추가하는 것입니다.

1

event.preventDefault()

로그인 후 복사

그러나 포커스 이벤트 콜백이 실행되지만 포커스 효과가 없기 때문에 이것이 우리의 기대에 미치지 못한다는 것을 알게 됩니다.

최종 해결 방법:

jQuery로 캡슐화되어 있으므로 네이티브 이벤트만 사용할 수 있습니다. 데모를 보면 왼쪽은 네이티브 이벤트에 의해 트리거되고 오른쪽은 TriggerHandler를 사용합니다.

1

$('input')[0].focus();

로그인 후 복사

더 많은 jQuery 관련 콘텐츠에 관심이 있는 독자는 이 사이트에서 "JQuery 드래그 효과 및 기술 요약", "jQuery 확장 기술 요약"과 같은 특별 주제를 확인할 수 있습니다. , "JQuery 일반 클래식 특수 효과 요약", "jQuery 애니메이션 및 특수 효과 사용 요약", "jquery 선택기 사용 요약" 및 "jQuery 공통 플러그인 및 사용법 요약》

이 기사가 jQuery 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.

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

인기 기사

스플릿 소설을이기는 데 얼마나 걸립니까?
3 몇 주 전 By DDD
Repo : 팀원을 부활시키는 방법
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
1 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까?
3 몇 주 전 By 王林
더보기

핫툴 태그

코드앤아이
오디오
사업
마케팅
AI감지기
챗봇
디자인&아트

인기 기사

스플릿 소설을이기는 데 얼마나 걸립니까?
3 몇 주 전 By DDD
Repo : 팀원을 부활시키는 방법
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
1 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까?
3 몇 주 전 By 王林
더보기

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

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

SublimeText3 중국어 버전

SublimeText3 중국어 버전

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

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

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

더보기

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?
7279
9
자바 튜토리얼
1622
14
Cakephp 튜토리얼
1340
46
라라벨 튜토리얼
1257
25
PHP 튜토리얼
1205
29
더보기
Related knowledge
프린터 작업을 완료할 수 없습니다. 오류 0x0000709 해결 방법 프린터 작업을 완료할 수 없습니다. 오류 0x0000709 해결 방법 Apr 20, 2024 pm 10:10 PM

프린터 작업을 완료할 수 없습니다. 오류 0x0000709 해결 방법

PHP Dompdf의 중국어 문자 왜곡 문제를 해결하는 방법 PHP Dompdf의 중국어 문자 왜곡 문제를 해결하는 방법 Mar 05, 2024 pm 03:45 PM

PHP Dompdf의 중국어 문자 왜곡 문제를 해결하는 방법

Black Shark 휴대폰이 계속해서 켜졌다 꺼졌다 하면 어떻게 해야 합니까? 그 해결책이 공개됩니다! Black Shark 휴대폰이 계속해서 켜졌다 꺼졌다 하면 어떻게 해야 합니까? 그 해결책이 공개됩니다! Mar 25, 2024 am 09:36 AM

Black Shark 휴대폰이 계속해서 켜졌다 꺼졌다 하면 어떻게 해야 합니까? 그 해결책이 공개됩니다!

Linux Oops 공개: 오류의 원인 및 해결 방법 Linux Oops 공개: 오류의 원인 및 해결 방법 Mar 20, 2024 am 11:15 AM

Linux Oops 공개: 오류의 원인 및 해결 방법

오류 코드 678의 의미와 해결 방법 오류 코드 678의 의미와 해결 방법 Feb 29, 2024 am 10:28 AM

오류 코드 678의 의미와 해결 방법

DeepSeek 공식 웹 사이트 입구 액세스 가이드 로그인 할 수없는 일반적인 문제를 해결하십시오. DeepSeek 공식 웹 사이트 입구 액세스 가이드 로그인 할 수없는 일반적인 문제를 해결하십시오. Feb 19, 2025 pm 04:30 PM

DeepSeek 공식 웹 사이트 입구 액세스 가이드 로그인 할 수없는 일반적인 문제를 해결하십시오.

포켓몬 크리스탈, 다이아몬드, 브라이트 펄, 오리가 길을 막고 있는 문제를 해결하는 방법은 무엇입니까? 포켓몬 크리스탈, 다이아몬드, 브라이트 펄, 오리가 길을 막고 있는 문제를 해결하는 방법은 무엇입니까? Apr 01, 2024 pm 02:33 PM

포켓몬 크리스탈, 다이아몬드, 브라이트 펄, 오리가 길을 막고 있는 문제를 해결하는 방법은 무엇입니까?

PHP mb_substr 함수가 실행되지 않는 솔루션 PHP mb_substr 함수가 실행되지 않는 솔루션 Mar 22, 2024 am 11:54 AM

PHP mb_substr 함수가 실행되지 않는 솔루션

See all articles