HTML] 웹 인터페이스 제작 :: 이벤트 버블링 활용

이벤트 버블링(event bubbling) 을 하지 않으려면 아래 중단 구문을 사용 합니다
event.cancelBubble=true;
return false;

이벤트 버블링을 활용하여 작은 옵션 박스(모바일 등에서 클릭이 난해 합니다)를 꾸며줍니다
모바일과 PC 버전을 혼용할 수 있도록 인터페이쓰를 구성 합니다
가변폭 사용 등의 인터페이스를 구성 할 수 있구요

옵션 버튼을 꾸며 보겠습니다
주로 아래 처럼 사용합니다
큰 버튼으로 옵션박스를 꾸민 예제

<style>

a{border:1px solid #ccc;border-radius:8px;width:120px;height:24px;display:inline-block}

</style>

<a href="#" onclick="alert(this.getElementsByTagName('input')[0].value);"><input type="radio" name="radio" value="1">radio 1</a>

<a href="#" onclick="alert(this.getElementsByTagName('input')[0].value);"><input type="radio" name="radio" value="2">radio 2</a>

아래처럼 나오게 됩니다

□radio1