IE에서 이상한 이벤트 캡처

Question

IE10 및 Chrome Browser에서 동일한 코드를 테스트합니다.

<div id='a'><input onclick="console.log('a');"/></div> 
<div id='b'><button onclick="alert('b');"/></div>` 

jsfilddle link

나는 두 개의 서로 다른 div 태그에 입력하고 버튼을 두 개의 서로 다른 태그를 넣어. 두 요소 (입력, 버튼)에는 onclick 특성이 있습니다. 내가 뭘

는

1. 는
2. 눌러 내가 IE10과 크롬에이 시도

키 입력 입력 태그에 커서를 넣어 간단하다.

크롬 브라우저에서 버튼에 첨부 된 이벤트 처리기가 실행되지 않았습니다. 버튼에 첨부 된 IE 이벤트 핸들러가 실행되었습니다. 이 재해가

Answer 1

IE는 뇌 손상 소년처럼 "enter"키를 눌러 처리합니다. Internet Explorer의 textbox/input/etc에서 Enter 키를 누르면 그와 관련이없는 완전히 다른 버튼이 클릭됩니다. 이 접근 방식을 가진 유일한 브라우저입니다.

제출 버튼을 선택하는 IE의 알고리즘과 관련이 있습니다. 양식 태그가없는 경우에도 단추는 하나라고 간주됩니다.

<button onclick="alert('b');"/> has default type = "submit" 

버튼 하나로 유형을 변경하여 변경할 수 있습니다.

<button type="button" onclick="alert('b');"/> 

근무 바이올린 : http://jsfiddle.net/k1bkcx43/

Answer 2

이 동작이 제대로 HTML5 스펙에 따라 크롬에 의해 구현되는 암시 적 양식 제출 관련이 일어나는 이유

사람이 나를 알 수 있습니다. here 사양을 사용할 수 있습니다.

간단히 말해서 텍스트 필드가 포커스되는 동안 '입력 키 누르기'는 브라우저가 제어하는 ​​암시 적 폼 제출을 호출하고 'form'요소 아래의 첫 번째 제출 버튼을 찾고 연결된 핸들러를 호출합니다.
'button'요소의 기본값은 'submit'유형이지만 'form'요소의 부류가 아니기 때문에 호출되지 않습니다.
현재 IE 동작이 사양에 맞지 않는다고 가정 할 수 있습니다.