중첩 된 웹 구성 요소 및 이벤트 전파

Question

두 개의 웹 구성 요소가 있습니다. 첫 번째는 입력 필드입니다. 두 번째는 단추가있는 양식입니다. 내 페이지는 입력 웹 구성 요소를 양식 웹 구성 요소에 넣기 만하면됩니다.

입력 웹 구성 요소는 일부 유효성 검사를 수행하기 위해 흐림 이벤트를 관리합니다. 이 유효성 검사는 오류가 발생했을 때 DOM에 몇 가지 요소를 추가합니다. 양식 웹 구성 요소는 버튼에서 click 이벤트를 관리하여 일부 작업을 수행합니다.

포커스가 입력에 있고 버튼을 클릭하면 blur 이벤트가 발생하지만 click 이벤트는 발생하지 않습니다. DOM에 블러 이벤트의 일부 요소를 추가하는 코드를 제거하면 두 이벤트가 발생합니다! > 콘솔 디스플레이 '흐림'

주석 행 (32) (- 입력에 초점을 넣어 https://jsfiddle.net/2guc1rkj/

1. 열기 콘솔
2. 을하고 버튼을 클릭 : 여기
   는 것을 입증하는 바이올린입니다 parent.appendChild (content);), Fiddle을 실행하고 입력에 포커스를두고 버튼을 클릭하십시오 -> 콘솔 디스플레이 'Blur'및 'Click'!

라인

는 언급합니다 : 내 흐림 이벤트는 DOM에 일부 수정을 할 때 내 클릭 이벤트가

parent.appendChild(content); 

를 작동하지 않는 이유는 무엇입니까?

Answer 1

콘텐츠를 추가하는 코드가있을 때 click 이벤트가 트리거되지 않는 이유는 콘텐츠를 추가하면 버튼이 이동하기 때문입니다. 이벤트는 순차적으로 트리거되므로 먼저 흐림을 트리거하고 내용을 추가하고 단추를 아래로 이동 한 다음 단추가 더 이상 클릭을 수신하지 않으므로 단추에 클릭이 발생하지 않습니다.

parent.appendChild에 주석을 달면 단추가 이동하지 않으므로 그대로 유지됩니다.

위의 버튼을 이동하지 않고 추가하는 요소로 이동하지 않는 위치로 이동하면됩니다. 당신이 생각하는 경우

https://jsfiddle.net/augburto/2guc1rkj/1/