DIV, CSS, Text를 이용한 버튼의 경우,
TAB 키를 이용한 포커스가 잡히지 않는 문제가 발생하였다....
이를 위한 대안으로
다음과 같이 DIV 태그에 onclick 이벤트처리를 하고
내부 Text에는 a 태그로 링크를 걸어주는 방식을 취했다
<div class="버튼이미지css" onclick="javascript:sample('생략', event)" style="cursor:pointer;">
<ul>
<li> <a href="#//" onkeypress="javascript:sample('생략', event)">확인버튼</a></li>
</ul>
</div>
하지만 위와 같은 방식은 마우스 클릭 및 모바일웹에서 터치시에는 문제가 되지 않으나...
탭키로 포커스 이동 후 엔터를 클릭하면 2중으로 이벤트 처리가 되는 문제가 발생하였다...
onclick을 onmouseup으로 처리해보았지만 모바일에서 터치가 되지 않는 문제가 여전히 존재...
지금은 flag 변수 값을 전역으로 둬서 처리를 해야 되나 심각히 고민중....(별로 사용하고 싶지 않은 방법이라...)
원인 : onkeypress가 호출되는 시점에 onclick 이벤트가 호출된다...
해결방안 : 위와 같은 현상에 대한 용어를 알아냈다. Bubbling이라 부르는 이 현상....stopPropagation()을 사용함으로써 해결할 수 있을 듯 하다.
결과 : stopPropagation() 함수는 관련 이벤트를 막아버리는 특성때문에 사용할 수 없었다....
onclick 이벤트가 엔터키에 반응한다는 사실과 외부 레이어로 감싼 이벤트도 동시에 발생한다는 점에 착안하여 결국 다음과 같은 방법으로 해결
<div class="버튼이미지css" onclick="javascript:sample('생략', event)" style="cursor:pointer;">
<ul>
<li> <a href="#//" onclick="return false;">확인버튼</a></li>
</ul>
</div>
a 태그인 경우엔 별도의 처리를 하지 않고 div의 이벤트에 의존하도록 변경...