jQuery에서 더블 클릭 이벤트만 구현하는 방법은 무엇입니까? 더블클릭 이벤트 구현방법(상세설명)-JS 튜토리얼-php.cn

jQuery에서 더블 클릭 이벤트만 구현하는 방법은 무엇입니까? 더블클릭 이벤트 구현방법(상세설명)

青灯夜游

풀어 주다： 2018-10-29 16:29:50

앞으로

3756명이 탐색했습니다.

이 글의 내용은 jQuery가 더블클릭 이벤트만 구현하는 방법을 소개하는 것입니다. 더블클릭 이벤트 구현 방법(자세한 설명) 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

jQuery의 이벤트 바인딩에서는 더블 클릭 이벤트(dblclick) 실행 시 두 개의 클릭 이벤트(click)가 트리거될 수 있습니다. 즉, label 요소(p 등)가 클릭 이벤트(click)와 더블 클릭 이벤트(dblclick)에 모두 바인딩된 경우 클릭 이벤트(click)가 실행되면 더블 클릭 이벤트(dblclick)는 트리거되지 않으며, 더블 클릭 이벤트(dblclick)는 두 개의 클릭 이벤트(클릭)를 트리거합니다.

클릭 이벤트의 실행 순서를 먼저 살펴보세요:

클릭(클릭): mousedown, mouseout, click

# 🎜🎜#더블클릭(dblclick): mousedown, mouseout, click, mousedown, mouseout, click, dblclick

더블클릭 이벤트(dblclick)에서 두 번의 클릭 이벤트(클릭); 트리거되면 첫 번째 원클릭 이벤트(클릭)는 차단되지만 두 번째는 차단되지 않습니다. 즉, 더블 클릭 이벤트(dblclick)는 클릭 이벤트(click) 결과와 더블 클릭 이벤트(dblclick) 결과를 반환합니다. 두 번 클릭 이벤트(dblclick)의 결과와 두 번의 클릭 이벤트(click)의 결과 대신.

이 경우에는 추가 클릭 이벤트(클릭)만 없애주시면 문제가 해결됩니다.

setTimeout

jQuery의 $(document).ready(function(){})에서 직접 열기:

//定义setTimeout执行方法
var TimeFn = null;

$('div').click(function () {
    // 取消上次延时未执行的方法
    clearTimeout(TimeFn);
    //执行延时
    TimeFn = setTimeout(function(){
        //do function在此处写单击事件要执行的代码
    },300);
});

$('div').dblclick(functin () {
     // 取消上次延时未执行的方法
    clearTimeout(TimeFn);
    //双击事件的执行代码
})

로그인 후 복사

#🎜 🎜#테스트 결과에 따르면 두 번의 클릭 사이의 시간이 300ms 정도인 경우 여전히 click 및 dblclick 이벤트가 "동시" 호출되기 쉽고 간격이 더 짧거나 길면 클릭만 발생합니다. 또는 dblclick 이벤트.

이때 더블클릭(dblclick)시 클릭(click)이 발생하는 것을 어느 정도 방지하여 더블클릭 이벤트를 구현할 수 있습니다.

위 내용은 jQuery에서 더블 클릭 이벤트만 구현하는 방법은 무엇입니까? 더블클릭 이벤트 구현방법(상세설명)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!