javascript나 jquery 사용 시 부모의 이벤트를 무시하고 싶을 경우.
즉 <a href=” 속성을 무시하고 click 이벤트만 사용하고 싶은 경우.
ie 계열의 Browser에서는 event.returnValue = false;
그 외의 Browser에서는 event.preventDefault();
를 이용하여 자기 자신의 기본 이벤트를 취소하는 기능이 있습니다.
function test(event){
try {
alert('test');
// if(event.preventDefault)
// event.preventDefault();
// else
// event.returnValue = false;
}
catch(e) {
alert("test ==> " + e.message);
}
}
<a id="aNate" href="http://nate.net" onclick="test(event);">nate</a>
위의 코드를 그대로 적용하게 되면, Nate로 이동하게 됩니다.
주석을 제거하고 테스트 해 보시면 Nate로 이동하지 않고 단지 test라는 메시지박스만 확인 할 수 있습니다.
즉. href 의 페이지 이동 이벤트를 무시하게 되는 것입니다.
이번에는 JQuery의 예제를 보도록 하겠습니다.
$(document).ready(function() {
$("a#aDaum").click(function(event){
//event.preventDefault();
$(this).hide("slow");
});
});<a id="aDaum" href="http://daum.net">daum</a>
Jquery에서는 IE를 구분하는 코드 필요 없이 무조건 preventDefault() 메소드를 사용하여 처리 할 수 있습니다.
javascript의 기능과 동일합니다.
주석을 제거하면 페이지 이동 없이 사라지는 것이죠..
Jquery의 toggle()을 이용하게 되면 여기서는 기본적으로 preventDefault() 속성을 지니고 있습니다.
예제를 보겠습니다.
$(document).ready(function() {
$("a#aNaver").toggle(function(){
$("a#aDaum").hide("slow");
},
function(){
$("a#aDaum").show("slow");
});
});<a id="aNaver" href="http://naver.com">naver</a> <a id="aDaum" href="http://daum.net">daum</a>
jquery의 모든 메소드를 확인해 본 것이 아니라 제가 확인한 toggel만 예제로 만들어 보았습니다.
참고 URL
http://api.jquery.com/event.preventDefault/
https://developer.mozilla.org/en/DOM/event.preventDefault
http://msdn.microsoft.com/en-us/library/ms534371(v=vs.85).aspx
감사합니다.
'Developer' 카테고리의 다른 글
| Microsoft SQL Server 2008 R2 - Reporting Service(리포팅 서비스)의 이해와 구성 방법 (0) | 2011.03.08 |
|---|---|
| Javascript, JQuery Xml Parsing (File, String) [Convert string to xml] (0) | 2011.02.28 |
| CSS Cross Browser Zoom In/Out(웹 브라우저 줌인/줌아웃) (6) | 2011.02.22 |
| Sharepoint 2010 대체 액세스 매핑(Alternate Access Mappings) (0) | 2011.02.22 |
| Team Foundation 2010(TFS 2010) 설치부터 구성까지..(구성편) (3) | 2011.02.18 |
