DIV 마스크를 사용하여 mouse_HTML/Xhtml_Web 페이지 제작 시 잘못된 체크박스가 직접 선택되는 문제 해결

프론트엔드 개발 과정에서 사용자 작업의 편의를 위해 확인이 필요한 상황이 발생했습니다. 클릭 이벤트를 DIV에 배치했습니다. (Knockout.js 사용)

코드는 대략 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

<div id="one" data-biind="click:clickevent">
<input type="checkbox"><span> 궁금하신 점은 꼭 확인해주세요&lt ;/span>
</div>

이런 식으로 div를 클릭하면 이상한 현상이 발생합니다.

그런데 체크박스를 마우스로 직접 체크하는 것은 일반적이지 않습니다.

체크박스는 체크되지 않은 상태이며, 이때 마우스를 직접 클릭하면 체크박스가 체크됩니다. 1. div의 clickevent 이벤트를 실행합니다. 2. 이벤트가 실행된 후 확인란이 선택된 상태가 됩니다.

하지만 최종 결과는 체크박스가 아직 선택 해제되어 있다는 것입니다.

추적 디버깅 결과는 clickevent 이벤트가 실행될 때 체크박스가 여전히 체크된 상태이지만 clickevent가 실행된 후 jquery 코드 실행이 2~3단계 후에 체크박스가 입력된다는 것입니다. Unselected 상태로 변경됩니다.

아직 원인을 찾지 못했습니다. (다른 곳에서 사용하는 라디오박스도 비슷한 상황입니다)

체크박스를 div 레이어로 덮어 마우스 클릭시 해당 div가 클릭되게 하는 방법 외에는 방법이 없습니다. checkbox 대신 clickevent를 통해 checkbox 상태를 변경합니다. (clickevent 이벤트에 checkbox 상태를 변경하는 코드가 있습니다.)

는 다음과 같이 구현됩니다.

코드 복사

코드는 다음과 같습니다.

<div id="one"> " data-bind="click:clickevent">< /div>
<div id="two">
<input type="checkbox"/> <span>체크해 주세요 질문이 있으시면 저에게 연락주세요</span>
</div>


ID가 2와 3인 두 개의 div를 설정하는 방법은 다음과 같습니다. 두 가지 속성을 설정합니다: position:absolute; z-index:1

상위 레이어의 z-index 속성이 하위 레이어의 div보다 큽니다.

위 DIV의 ID 속성은 단지 설명을 위한 것입니다. 일반적으로 프로그램에서는 class 속성을 사용합니다.