jQuery - 단일 대 더블 클릭 - jEditable

Question

다음 빌드를 위해 '올바른'방법을 찾으려고 애 쓰고 있습니다.

제목이있는 td 셀이 있습니다 (큰 테이블에서). 이 td에는 하위 메뉴를 여는 click 이벤트가 있습니다. div 클래스로 래핑 된이 제목에 jEditable을 사용하여 인라인 편집을 구현했습니다.

단순화 :

<tr> 
.... 
    <td class="menuopener"><div class="editable">TITLE</div></td> 
... 
</tr> 

내가 DblClick에 jEditable을 triger하는 사업부 세트가 있습니다.

이 div가 전체 셀을 차지하므로 메뉴 푸시 클릭 이벤트가 발생하지 않습니다.

div를 display : inline으로 변경하면 셀의 '나머지'부분을 가져 와서 메뉴 열기 트리거를 사용할 수 있습니다.

하지만 두 번 클릭하면 메뉴가 열리지 않습니다. 사용자가 지금하려는 의도가 아니기 때문에 .... 그들은 제목을 업데이트하려고합니다.

이렇게하려면 '최선의 방법'이 필요합니다 ... 반드시 코드 위주는 아니지만 인간의 요인에 따라 다릅니다. 지연 추적기가 아이디어입니까? 메뉴를 두 번 클릭하고 단일 메뉴에서 편집하도록 변경하지만 같은 문제 만 뒤로 ..... .....

생각은?

Answer 1

헤더의 크기에 관계없이 이벤트는 항상 거품으로 나타납니다. 제목 더블 클릭 리스너가 실행되면 메뉴 열기에 대한 클릭 리스너가 항상 두 번 먼저 실행됩니다. Demo.

클릭 대상이 귀하의 제목 인 경우 두 번 클릭에 대한 임계 값과 상관없이 메뉴 열기를 조절해야합니다. 당신이 참으로 판명 수 있습니다 클릭이 더블 클릭 할 경우 메뉴 오프너는 지연되는 기능을 활용하여 편집 inline-block을 할 수 있습니다 후자의 예에서

Demo

$('.menuopener').click(function(e) { 
    var delay = $(e.target).is('.editable') ? 200 : 0; 
    window.clearTimeout(window.openMenuTimeout); 
    window.openMenuTimeout = window.setTimeout(function() { 
     // your menu opener code 
    }, delay); 
}); 

$('.editable').dblclick(function(e) { 
    window.clearTimeout(window.openMenuTimeout); 
    // your editable code 
}); 

사실 .editable에 있습니다.