인라인 편집 : onBlur가 onClick을 트리거하지 못하게합니다 (jQuery)

Question

Hello StackOverflow 커뮤니티!

현재 내 필요에 맞지 않는 인라인 편집 용 jQuery 플러그인을 만들고 있습니다.

어쨌든, 내가 곧 길이 편집에 관한 다음 (부울) 옵션이 작동하도록되어 사용자주고 싶습니다

• 으로 submit_button을
• reset_on_blur

는의 사용자를 가정 해 봅시다 제출 버튼 (submit_button = true)을 원하고 인라인 입력 요소가 포커스를 잃는 즉시 제거되기를 원합니다 (reset_on_blur = true). 버튼에 등록 된 onClick 핸들러와 입력 요소에 등록 된 onBlur 핸들러로 연결됩니다.

그러나 사용자가 버튼을 클릭 할 때마다 onBlur 핸들러가 트리거되고 onClick 이벤트가 발생하기 전에 편집 모드가 유지됩니다. 이로 인해 제출이 불가능 해집니다.

참고로, 편집 모드에서 HTML은 다음과 같습니다

<td><input type="text" class="ie-input" value="Current value" /><div class="ie-content-backup" style="display: none;">Backup Value</div><input type="submit" class="ie-button-submit" value="Save" /></td> 

를 따라서 초점이 손실 된 경우가 제출 '버튼을 활성화하는 동안 나는 및 onblur 처리기에서 확인할 수있는 방법이 그 편집 있도록 제출 버튼의 onClick 이벤트가 트리거되기 전에 모드가 남아 있지 않습니까?

$ ('body'). click() 핸들러를 등록하여 블러를 시뮬레이트하고 클릭 한 요소를 추적 할 수 있었지만 작동하지 않아 결과적으로 오히려 이상한 버그 :

$('html').click(function(e) { // body doesn't span over full page height, use html instead 

// Don't reset if the submit button, the input element itself or the element to be edited inline was clicked. 
if(!$(e.target).hasClass('ie-button-submit') && !$(e.target).hasClass('ie-input') && $(e.target).get(0) != element.get(0)) { 
    cancel(element); 
} 
}); 

jEditable은 다음 코드를 사용합니다. 나는 지연 때문에 이러한 접근법을 좋아하지 않는다. 나는 왜 이것이 작동하는지 이해하지 못하게합니다. ;)

input.blur(function(e) { 
/* prevent canceling if submit was clicked */ 
t = setTimeout(function() { 
    reset.apply(form, [settings, self]); 
}, 500); 
}); 

미리 감사드립니다.

Answer 1

제출물을 click 대신 mousedown/keydown 이벤트에 바인딩합니다. 그들은 둘 다 blur 전에 발사한다. 그런 다음 필요에 따라 unbind 또는 클래스 검사 등을 사용하여 흐림 이벤트를 취소하거나 무효화 할 수 있습니다.

편집 : 불행히도 탭 탭을 사용하면 이상적인 방법이 아닐 수 있습니다.

Answer 2

onblur 및 onclick을 모두 실행하려면 버튼의 onClick 대신 onfocus를 사용하십시오. 그러면 onblur 이벤트가 먼저 발생하고 onFocus 이벤트가 시작됩니다. OnClick에서 OnFocus 이벤트로 코드를 복사하면 잘 작동합니다.

    $(document).off('focus', '#Button1'); 
        $(document).on('focus', '#Button1', function (e) { 

         // ur work. 
         } 

        });