메뉴 건너뛰기

조회 수 69 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

자바스크립트에서 이벤트 수행 막기

 

event.preventDefault()

현재 요소에 직접 걸어준 이벤트는 처리하지만 태그의 기본 동작은 작동하지 않도록 막는다.

 

event.stopPropagation()

기본적으로 하위 요소에서 발생한 이벤트는 상위 요소에서도 캐치가 가능한데 이 함수는 현재 요소에서 발생한 이벤트가 상위 요소에서는 발생하지 않도록 막아준다.

 

event.stopImmediatePropagation()

현재 요소에 발생한 이벤트가 상위 요소에서 발생하지 않도록 막아주고, 현재 요소의 이벤트가 여럿일 경우 첫 번째 정의한 이벤트만 작동하도록 한다.

 

return false

jQuery에서 : event.preventDefault()와 event.stopPropagation() 동시 수행한다.
javascript에서 : event.preventDefault()와 같다.
ex) <a href="javascript:return false;">링크예시<a>


 

예제 소스

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
nav {background-color: gray; padding: 40px;}
div {background-color: yellow; padding: 40px;}
a {background-color: green; padding: 20px; display: inline-block;}
</style>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function(){
    $("div").on("click",function() {
        console.log("div 태그의 클릭 이벤트");
    });
    $("a").on("click",function(event) {
        console.log("a 태그의 클릭 이벤트1");
        event.preventDefault();
    });
    $("a").on("click",function(event) {
        console.log("a 태그의 클릭 이벤트2");
        event.preventDefault();
    });
});
</script>
</head>
<body>
<nav>
    <div>
        <a href="http://www.daum.net" target="_blank">링크</a>
        <a href="javascript:console.log('a 태그의 인라인 자바스크립트 호출');">alert</a>
    </div>
</nav>
</body>
</html>


 

event.preventDefault()

$(function(){
    $("div").on("click",function() {
        console.log("div 태그의 클릭 이벤트");
    });
    $("a").on("click",function(event) {
        console.log("a 태그의 클릭 이벤트1");
        event.preventDefault();
    });
    $("a").on("click",function(event) {
        console.log("a 태그의 클릭 이벤트2");
        event.preventDefault();
    });
});

스크립트 부분을 위 처럼 작성 후


1. &lt;a&gt; 클릭시
  - a 태그의 링크 기능이 작동하지 않는다
  - a 태그의 인라인 자바스크립트가 작동하지 않는다.
  - a 태그에 걸어둔 2개의 이벤트가 모두 작동한다.
  - 부모 요소인 div 태그에 걸어둔 이벤트도 함께 작동한다.

2. &lt;div&gt; 클릭시
  - div 태그에 걸어둔 이벤트만 작동한다.

3. &lt;nav&gt; 클릭시
  - 아무런 작동이 없다.


 

event.stopPropagation()

$(function(){
    $("div").on("click",function() {
        console.log("div 태그의 클릭 이벤트");
    });
    $("a").on("click",function(event) {
        console.log("a 태그의 클릭 이벤트1");
        event.stopPropagation();
    });
    $("a").on("click",function(event) {
        console.log("a 태그의 클릭 이벤트2");
        event.stopPropagation();
    });
});

위 처럼 스크립트 사용시 자식 요소에서 클릭 이벤트가 발생하더라도 부모 요소에 걸어둔 이벤트는 작동하지 않았다.

스크립트 부분을 위 처럼 작성 후


1. &lt;a&gt; 클릭시
  - a 태그의 링크 기능이 정상 작동한다
  - a 태그의 인라인 자바스크립트가 정상 작동한다.
  - a 태그에 걸어둔 2개의 이벤트가 모두 작동하였다.
  - 부모 요소인 div 태그에 걸어둔 이벤트는 작동하지 않는다.

2. &lt;div&gt; 클릭시
  - div 태그에 걸어둔 이벤트만 작동한다.

3. &lt;nav&gt; 클릭시
  - 아무런 작동이 없다.


 

event.stopImmediatePropagation()

$(function(){
    $("div").on("click",function() {
        console.log("div 태그의 클릭 이벤트");
    });
    $("a").on("click",function(event) {
        console.log("a 태그의 클릭 이벤트1");
        event.stopImmediatePropagation();
    });
    $("a").on("click",function(event) {
        console.log("a 태그의 클릭 이벤트2");
        event.stopImmediatePropagation();
    });
});

위 처럼 스크립트 사용시 여러개의 이벤트 중 첫번째 선언한 이벤트 하나만 처리되었고 인라인 자바스크립트는 정상적으로 실행되는 것을 확인할 수 있었다.

스크립트 부분을 위 처럼 작성 후


1. &lt;a&gt; 클릭시
  - a 태그의 링크 기능이 정상 작동한다
  - a 태그의 인라인 자바스크립트가 정상 작동한다.
  - a 태그에 걸어둔 이벤트 중 먼저 선언한 이벤트 하나만 작동한다.
  - 부모 요소인 div 태그에 걸어둔 이벤트는 작동하지 않는다.

2. &lt;div&gt; 클릭시
  - div 태그에 걸어둔 이벤트만 작동한다.

3. &lt;nav&gt; 클릭시
  - 아무런 작동이 없다.


 

return false

$(function(){
    $("div").on("click",function() {
        console.log("div 태그의 클릭 이벤트");
    });
    $("a").on("click",function(event) {
        console.log("a 태그의 클릭 이벤트1");
        return false;
    });
    $("a").on("click",function(event) {
        console.log("a 태그의 클릭 이벤트2");
        return false;
    });
});

위와 같이 return false를 사용하면 event.stopPropagation()과 event.preventDefault()를 동시에 사용하는 것과 같은 작동을 하였다. 태그 원래의 기능과 인라인 자바스크립트의 수행을 막고자 한다면 위처럼 사용해도 될 것 같다.

스크립트 부분을 위 처럼 작성 후


1. &lt;a&gt; 클릭시
  - a 태그의 링크 기능이 작동하지 않는다
  - a 태그의 인라인 자바스크립트가 작동하지 않는다.
  - a 태그에 걸어둔 2개의 이벤트가 모두 작동하였다.
  - 부모 요소인 div 태그에 걸어둔 이벤트는 작동하지 않는다.

2. &lt;div&gt; 클릭시
  - div 태그에 걸어둔 이벤트만 작동한다.

3. &lt;nav&gt; 클릭시
  - 아무런 작동이 없다.

List of Articles
번호 제목 날짜 조회 수
241 문자열 안에 쌍따옴표, 홑따옴표 표시하는 3가지 방법 file 2021.08.20 183
240 대소문자 변경 (대문자를 소문자로, 소문자를 대문자로) 2021.08.20 80
239 시간 계산하기 (시/분/초/ 더하기, 빼기) 2021.08.20 560
238 날짜 계산 (Date) 마지막 날짜(말일)/윤달/윤년 처리하기 2021.08.20 534
237 월의 마지막 날짜 계산하기 2021.08.20 51
236 Date 객체로 원하는 날짜, 시간 표현하기 2021.08.20 51
235 날짜 계산하기 (년/월/일 더하기, 빼기) 2021.08.20 666
234 3자리 마다 쉼표만 찍어주는 number_format 함수 2021.03.26 68
233 팝업창 맨위로 올라오게 하기 2021.03.26 250
232 폼안에 태그명, 함수명 같을때 오류 2021.03.26 83
231 ajax 사용시 Internal Sever Error 뜨는 경우 2021.03.26 195
230 자주쓰는 것들 2021.03.26 67
229 utf-8일때 alert 한글 깨짐 해결 2021.03.26 1301
228 split, join, replace, replace_all 2021.03.26 70
227 opener 값전달, 함수실행.(자식창에서 부모창으로 값전달, 함수실행) 2021.03.26 659
226 getYear(); 크롬, 파이어폭스 에서 제대로 작동 안하는 문제 2021.03.26 47
225 DTREE 트리구조 만들기 file 2021.03.26 363
224 페이지 이동 2021.03.26 52
223 default 매개변수(매개변수 기본값) 2021.03.26 51
» 자바스크립트에서 이벤트 중단 하는 방법 2021.03.25 69
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 13 Next
/ 13

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved