기본 이벤트를 제거하고 이벤트의 전달을 막기 예제입니다.
preventDefault메소드로 기본 이벤트를 제거합니다.
stopPropagation메소드로 이벤트 전달을 제거합니다.
<!DOCTYPE html>
<html>
<head>
<style>
*{
margin: 5px; padding: 5px;
border: 3px solid black;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function (){
//이벤트에 연결합니다.
$('a').click(function(event){
$(this).css('background-color', 'blue');
event.stopPropagation();
event.preventDefault();
//아니면 다음과 같이 해도된다.
//return false;
});
$('h1').click(function (){
$(this).css('backgound-color', 'red');
});
});
</script>
</head>
<body>
<h1>
<a href="http://hanb.co.kr">han media</a>
</h1>
</body>
</html>
실행화면
다음과 같이 링크를 클릭해도 링크로 연결이 되지않습니다.
'프로그래밍 > Jquery' 카테고리의 다른 글
| jquery - 입력양식 이벤트를 이용한 한번에 모든 체크박스를 체크하기 (2) | 2014.10.18 |
|---|---|
| jquery - window객체를 활용하며 무한 스크롤 구현하기 (0) | 2014.10.18 |
| jquery - keyup메소드를 이용한 글자수세기프로그램 만들기 (0) | 2014.10.11 |
| jquery - delegate 방법을 사용한 이벤트 연결 범위 한정 (0) | 2014.10.11 |
| jquery - context 객체 활용 예제 (0) | 2014.10.11 |
| jquery - on메소드를 이용한 이벤트 연결 (0) | 2014.10.11 |
| Jquery - $.extend 메소드 사용법 (0) | 2014.09.12 |
| Jquery - $.each 메소드 사용법 두번째 (0) | 2014.09.12 |