GreenBean

Archive for April, 2008

Anchor 태그에서 클릭 무효화(?)

April 18, 2008 at 2:44 am · Filed under 주절주절

Anchor로 탭기능을 구현 할 경우 가장 쉬운 방법은 <a href="#" onclick="blah()">Tab1</a>이 겠지만, 그래도 클릭하면 html뒤에 #이 붙는 문제가 발생한다.



	두번째 해결 방법으로는

<a href="javascript='blah()'" >Tab1</a>정도

	세번째는

<a href="#tab1" onclick="blah();return false;">Tab1</a> 이고 책이나 여러 사이트에서 권장하는 방법이다. 의미 있는 주소를 가지면서 클릭이 실행되지 않는다.

	그런데 탭을 DOM으로 파싱해서 document가 onload될 때 자동으로 만들려고 할 때는 세가지 모두 제대로 동작하지 않는다. onload시에 이벤트를 Attach하면 먼저 정의된 return false;가 동작하지 않는다.

YUI의 TAB 위젯의 경우 잘 처리되고 있다. (소스를 봐도 잘 모르겠더라..디펜던트JS가 많아서.. 쩝) 이런 닭짓 할 사람은 별로 없겠지만..

	몇 주간 고민하다가 알아낸 꼼수는...

onload 시 anchor에다가 setAttribute("onclick", "return false")로 적어주는 것. 그렇지만 IE7에서는 제대로 동작하지 않는데, 아마 렌더링시 버그인지 몰라도 setAttribute같은 걸로 HTML속성을 컨트롤 하려고 하면 제대로 적용해주지 않는다.

	그래서 IE를 위해서 innerHTML로 다시 똑같은 내용을 적어주면 재 렌더링을 하기 때문에 적용이 된다. 그 후에 추가하는 이벤트역시 잘 Attach된다. 최소한 FF2, IE7, Safari 3.1에서는..

	간단히 써보면

<javascript type="text/javascript">

< ![CDATA[

function init(o)

{
 var parent = document.getElementsByTagName("ul")[0];
 var items = parent.getElementsByTagName("a");
 for(var i=0; i<items.length; i++)
 {
   items[i].setAttribute("click", "return false");
 }

 //for I.E
 parent.innerHTML = parent.innerHTML;

}

	YAHOO.util.Event.addListener(window, "load", init);

]]>

</javascript>