[ 이벤트 발생시 a 태그의 이동기능을 동작하지 않게하고 처리하기 ]
아주 가끔 a태그를 클릭시 a태그 href 에 지정된 속성으로 이동을 막고, 처리가 필요한 경우에 어떻게하는지에 대한 포스팅입니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!DOCTYPE html> <head> <meta charset= "utf-8" > <title></title> </head> <ul> <li> <a href= "국어" >국어</a> </li> <li> <a href= "영어" >영어</a> </li> <li> <a href= "수학" >수학</a> </li> </ul> <script type= "text/javascript" > $(document).ready(function(){ $( "li a" ).on( "click" ,function(event){ // a태그 클릭시 작동 // 클릭된 태그의 본래의 기능을 막음 즉, a태그 본래 기능을 막음 event.preventDefault(); var txt = $( this ).attr( "href" ); // href에 입력된 값을 가져옴 즉 클릭된 a의 국어, 영어, 수학 중 하나를 가져옴 alert(txt + "가 클릭됨" ); }); }); // end of ready() </script> |
'개발 > Javascript' 카테고리의 다른 글
동적으로 생성된 태그에 이벤트를 걸려면 어떻게 해야할까?? (1) | 2017.06.11 |
---|---|
클릭시 특정 태그 위치로 스크롤을 이동시키기 (1) | 2017.06.11 |
JQuery 애니메이션 관련 정리(fadeIn,fadeOut,hide,show,animate,stop) (0) | 2017.06.11 |
4. script 선언의 위치?!! (0) | 2017.06.11 |
3. 일정주기마다 callback 함수를 실행하는 setInterval()에 대해서... (0) | 2017.06.11 |