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 32 33 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <style> h4 { border: 1px solid #000; } </style> <script src="js/jquery.js"></script> </head> <body> <h4> <a href="#">테스트</a> </h4> <script> $('a').click(function(event) { $(this).css('background-color', 'Blue'); // event.stopPropagation(); // (사용자가 등록한 이벤트해제) // 부모태그로 이벤트 전파 중지 // event.preventDefault(); // (브라우저 기본이벤트 해제) // a태그 액션 막기 return false; // stopPropagation()과 preventDefault()를 모두 실행된다. }); // a태그와 h4태그의 이벤트가 중첩된 영역을 클릭시 이벤트 전파가 중지되어 부모태그(h4)의 click이벤트는 실행되지 않는다. $('h4').click(function() { $(this).css('background-color','Red'); }); </script> </body> </html> |
반응형
'jQuery' 카테고리의 다른 글
| [jQuery] $.fn.reverse - 확장집합 역순으로 정렬 (0) | 2015.02.05 |
|---|---|
| [jQuery] add()메서드 - 확장집합에 다른 요소 추가, jquery 객체 합치기 (0) | 2015.02.04 |
| [jQuery] event.target - 중첩된 요소에 이벤트가 모두 걸려있을때 이벤트가 발생한 요소 확인 (0) | 2015.01.23 |
| [jQuery][사용자함수] $.fn.higherLayer - 확장집합에서 z-index가 가장 높은 요소 선택 (0) | 2015.01.06 |
| [jQuery] $.each, $.inArray - 배열 중복값 제거 함수 (0) | 2015.01.06 |
