preventDefault(); 사용하기
새로운 요소에 전달하면서 a태그 링크 기능을 무효화 시킨다.
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="./foo.js"></script>
</head>
<body>
<section id="Container">
<div id="Content">
<a href="#">클릭은 무효화시키고 div에 foo 클래스가 추가 된다.</a>
</div>
</section>
</body>
</html>
$(function(){
$('a').click(function(event){
event.preventDefault();
$("div#Content").addClass("foo");
});
});
a태그가 클릭된 경우에도 preventDefault 메소드를 추가 하여 a태그 자체 링크 기능을 무효화 하면서 새로운 요소인 div#Content에 클릭 이벤트를 전달하는게 가능
return false; 사용하기
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="./foo.js"></script>
</head>
<body>
<section id="Container">
<div id="Content">
<a href="#">클릭은 무효화시키고 div에 foo 클래스가 추가 된다.</a>
</div>
</section>
</body>
</html>
실제 동작은 return false;를 반환한 뒤 a태그 자체의 링크 기능을 무효화하고, 그 클릭 이벤트를 새로운 요소에 전달하지 않는다.
$(function(){
$('a').click(function(){
$("div#Content").addClass("foo");
return false;
});
});
예를들면 return false;를 addClass 메소드 전에 전에 가져오면 클릭 이벤트가 신요소에 전달되지 않으므로 신요소에 foo 클래스가 생성되지 않는다.
'Dev > JavaScript' 카테고리의 다른 글
| [javascript] 자바스크립트 배열 정렬 시키기 (Sort) (0) | 2021.03.18 |
|---|---|
| [jQuery] 현재 포커스 상태인 요소의 ID 취득 방법 (0) | 2021.03.18 |
| [javascript] 자바스크립트 배열의 중복값을 제거하는 간단한 방법 (0) | 2021.03.17 |
| [JavaScript] Array 자바스크립트 배열 추가 결합 값 구하기 삭제 사용 방법 총정리 (0) | 2017.06.14 |
| [JavaScript] 자바스크립트 문자열 포함 검색 체크 확인 방법 (0) | 2017.05.29 |
| [Javascript] jQuery 랜덤 함수 사용 방법 (0) | 2016.07.25 |
| JavaScript에서 날짜 Date관련 사용에 유용한 moment.js 다운로드 및 사용 방법 (2) | 2016.07.13 |
| javascript jquery로 입력 받은 input이나 해당 속성에 값이 있는지 php의 empty isset처럼 체크하기 (0) | 2014.04.03 |