지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 클릭 및 더블 클릭에 대한 충돌 처리 샘플 코드 events_jquery

클릭 및 더블 클릭에 대한 충돌 처리 샘플 코드 events_jquery

WBOY
풀어 주다： 2016-05-16 16:53:33
원래의
1129명이 탐색했습니다.

먼저 코드를 입력하세요:

코드를 복사하세요 코드는 다음과 같습니다:

< ;제목>
;script type=" text/javascript" 언어="javascript">
$(function () {
$("div").bind("click.a", function () { //클릭 이벤트
$("body").append("

클릭 이벤트

")
})
$("div").bind("dblclick.a", function () { //더블클릭 이벤트
$("body").append("

dblclick 이벤트

")
})
$("div"); .bind(" mouseover.a", function () { //요소 위에 마우스 오버 이벤트
$("body").append("

마우스 오버 이벤트

");
})
$("div").bind("mouseout.a", function () { //마우스가 요소 밖으로 이동하는 이벤트
$("body").append("

mouseout event< ;/p> ;");
})
})



jQuery 네임스페이스< / div>


그림과 같이 효과가 발생합니다. 두 번의 클릭 이벤트가 먼저 발생합니다. 그리고 더블클릭시

클릭 이벤트는 발생시키지 않고 더블클릭 이벤트만 발생시키고 싶은 경우 어떻게 해결해야 하나요?

이런 식으로는 클릭 이벤트를 다시 사용할 수 없습니다. . .


클릭 및 더블 클릭에 대한 충돌 처리 샘플 코드 events_jquery
나중에 포럼에서 다른 사람들에게 물어보니 마침내 답변을 얻었습니다. 즉, 클릭 이벤트의 시간 간격을 설정하기 위해 setTimeout() 메소드를 사용하는 것입니다. 이 시간 간격은 일반적으로
300ms로 설정됩니다. 이렇게 하면 더블 클릭의 시간 간격이 줄어들기 때문입니다. 300ms보다 크면 클릭 이벤트가 생성되지 않습니다.
dblclick 이벤트만 생성하세요. 더블 클릭 이벤트에서는 click 이벤트 처리를 지우려면clearTimeout() 함수를 사용해야 합니다. 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.
저자별 최신 기사
최신 이슈
opentbs를 사용하여 odt 파일을 생성할 때 발생하는 문제: 동일한 키의 값이 별도의 열이 아닌 동일한 행에 표시됩니다. PHP를 사용하여 odt를 만들기 위해 OpenTbs라는 라이브러리를 사용하고 있는데, 열과 행이 동적으로 생성되기 때문에 사용하고 있습니다. 행과 열을 만드는 ...
에서 2024-04-06 20:18:18
0
1
483
모바일 보기에서 사용자가 링크를 클릭할 때 이 탐색 표시줄을 어떻게 닫을 수 있나요? 사용자가 웹 사이트를 탐색하기 위해 링크를 클릭하면 탐색 표시줄이 닫히지 않습니까? 내비게이션 바를 닫기 위해 각 링크에 클릭 이벤트 리스너를 추가해 보았지만 작...
에서 2024-04-06 19:23:03
0
1
411
JavaScript를 사용하지 않고 클릭 시 이미지 소스를 동적으로 수정하는 CSS 전용 방법 img:active와 같은 CSS만 사용하여 마우스 클릭 시 이미지의 소스를 변경해야 합니다.{}
에서 2024-04-06 19:25:49
0
1
505
Android의 React-Native에서 상태 업데이트가 작동하지 않습니다. 스와이프할 수 있는 가로 갤러리에 이미지 쌍이 있는 코드가 있습니다. 이제 두 이미지의 위쪽 부분을 클릭하면 이미지가 꺼지므로 isImage2Active를 상태로...
에서 2024-04-06 16:54:10
0
1
410
Imagick, Adobe Photoshop 및 Windows 비교 - 해상도 감지(센티미터당 픽셀 또는 인치당 픽셀) 이것은 질문이 아니라 DPI가 다양한 파일 형식으로 저장되는 방식에 대한 이해를 높이고 그것이 작동하는 이유에 대해 논의하려는 시도입니다. 저는 이미지(JPG, ...
에서 2024-04-06 16:01:27
0
1
397
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿