2014-06-12 5 views
3

내부에서 편집 가능한 일부 필드가있는 JQuery (1.8) 데이터 테이블 (1.10)이 있습니다. 즉, 클릭하면 새 데이터를 입력하여 테이블을 업데이트 할 수있는 입력 요소가 만들어집니다.IE8 클릭 이벤트 문제

IE8 (크롬이나 파이어 폭스에서는 IE 버전이 아님)에서 편집 가능한 입력란에 return을 누르면 테이블 외부의 '클릭'이벤트가 생성되는 것으로 보입니다. 이 버튼은 부트 스트랩 모달 대화 상자를 열 때 불행한 일입니다.

왜 이렇게 될 가능성이 있으며이를 해결하는 가장 좋은 방법은 무엇입니까? AFAICT 입력 필드에 대한 클릭 핸들러가 없습니다 (전달을 중지하려면 false를 반환하는 keyup 핸들러가 있음). 지금은 IE8이 이벤트를 다르게하는 방식과 관련된 문제라고 가정하고 있지만이 단추에서 클릭 이벤트를 생성하는 방법이 확실하지 않습니다.

입력 이벤트 리스너는 다음과 같습니다

_setupEventListeners: function (tableEditor) { 
    // Listen for key presses to trigger any finalisation actions 
    this.element.on('keyup', function (event) { 
    switch (event.keyCode) { 
    // return or enter keys 
    case KEYCODE_ENTER: 
     tableEditor.saveAndClose(); 
     break; 
    // esc key 
    case KEYCODE_ESCAPE: 
     tableEditor.revertAndClose(); 
     break; 
    } 
    // may be overkill as JQ does stopPropagation if false returned?? 
    event.stopPropagation(); 
    (event.preventDefault) ? event.preventDefault() : event.returnValue = false; 
    return false; 
    }); 
    }, 

버튼 이벤트 핸들러는 다음과 같습니다

$(tableId + '-addRow').click(function (event) { 
    console.log("AddRow click"); 
    // modal opened here.... 
}); 
+0

내가하고자하지만 사내 도구와 불행하게도 여러 모듈에 분산되어 있는지 확인합니다. 나는이 질문의 일부를 포함하도록이 질문을 시도하고 편집 할 것이다. – vogomatix

+0

코드 샘플이 추가되었습니다 ... – vogomatix

+0

아마도 당신이 말하는 버튼이 집중되어있을 것입니다. ** 히트를 치면 ** 그와 같은 행동을하게됩니다. – kidwon

답변

4

는 특히

Internet Explorer가 성가신 특질을 가지고 http://tjvantoll.com/2013/05/22/why-are-enter-keypresses-clicking-my-buttons-in-ie/

를 참조하는IE10 현재 : 존재하지 않는 경우에도 텍스트 버튼에서 Enter 키를 누를 때 제출 버튼은 이 될 수 있습니다. [...] 다른 브라우저는이 동작을 나타내지 않습니다.

짧은 수정 : 귀하의 버튼 type='button'보다는 type='submit'

+0

난 그냥 이것을 확인하고 다시 당신에게 돌아갈거야 ... 난 그냥 버튼 타입을 지정하지 않은 것으로 나타났습니다 그래서이 될 수 있습니다 리드 – vogomatix

+0

고마워 - 보이는 것 같습니다 answe Logged – vogomatix