메뉴 건너뛰기

조회 수 319 추천 수 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; 클릭시
  - 아무런 작동이 없다.

  1. opener 값전달, 함수실행.(자식창에서 부모창으로 값전달, 함수실행)

    Date2021.03.26 Views1437
    Read More
  2. getYear(); 크롬, 파이어폭스 에서 제대로 작동 안하는 문제

    Date2021.03.26 Views197
    Read More
  3. DTREE 트리구조 만들기

    Date2021.03.26 Views851
    Read More
  4. 페이지 이동

    Date2021.03.26 Views190
    Read More
  5. default 매개변수(매개변수 기본값)

    Date2021.03.26 Views199
    Read More
  6. 자바스크립트에서 이벤트 중단 하는 방법

    Date2021.03.25 Views319
    Read More
  7. 현재 날짜, 시간 ( Month + 1 에 대해서 )

    Date2021.03.25 Views218
    Read More
  8. 오브젝트 속성

    Date2021.03.25 Views237
    Read More
  9. jqgrid 이용한 그리드 활용하기

    Date2021.03.25 Views2287
    Read More
  10. HTML, Javscript - 선택한 색상으로 배경색 바꾸기(pallet 만들기)

    Date2021.03.09 Views710
    Read More
  11. Javascript - 입력받은 숫자를 순서대로 홀짝 별로 배열에 삽입하기

    Date2021.03.09 Views302
    Read More
  12. Javascript - Free SVG 한국맵 제어 처리

    Date2021.03.09 Views864
    Read More
  13. Javascript - form태그 내부 ajax처리시 2번 전송되는 현상

    Date2021.03.09 Views266
    Read More
  14. javascript - vanillaJS로 체크박스(checkbox) 제어하기

    Date2021.03.09 Views472
    Read More
  15. Javascript - 유효성 체크(이메일 정규식, IP 정규식, 비밀번호 등)

    Date2021.03.09 Views718
    Read More
  16. Javascript - 사업자 등록번호 유효성 체크

    Date2021.03.09 Views1088
    Read More
  17. Javascript - Calendar 달력 생성하고 제어하기

    Date2021.03.09 Views511
    Read More
  18. Javascript - 입력한 년, 월의 마지막 날짜 구하기

    Date2021.03.09 Views219
    Read More
  19. Javascript - 화면 캡처 후 서버에 저장하기(html2canvas 사용법, 주의사항)

    Date2021.03.09 Views2125
    Read More
  20. Javascript - 이미지 미리보기 회전되어 나옴(EXIF)

    Date2021.03.09 Views36160
    Read More
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 13 Next
/ 13

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved