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
감사합니다.
'Script > JavaScript' 카테고리의 다른 글
| 순수 javascript cross-browser ajax 구현 (Xmlhttprequest) (0) | 2012.07.26 |
|---|---|
| Javascript, JQuery Xml Parsing (File, String) [Convert string to xml] (0) | 2011.02.28 |
| javascript iframe에 접근하여 iframe method call (0) | 2010.09.09 |
| jquery table row add and remove (0) | 2010.08.11 |
| javascript jquery Plugin을 이용한 textarea 자동 사이즈 조정(auto resize) (0) | 2010.05.28 |