티스토리 뷰

[개발]프로그래밍/jquery

[jquery] stopPropagation() - 이벤트 전달을 제거

좋은 블로그 2016. 10. 17. 10:21

1. stopPropagation() - 역할

객체 내에서 이벤트 전달을 제거


2. stopPropagation() - 예제1 (사용하지 않을 경우)

◈ 코드


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>
 
<script>
$(document).ready(function () 
{
    $('h1').click(function(event) {
        $(this).css('background-color','yellow');
        //event.stopPropagation();
    });
    
    $('div').click(function(){
        $(this).css('background-color','blue');
    });
    
});
</script>
 
<body>
        <div style="border :1px solid #000000">
            <h1 style="border :1px solid #000000">test1</h1>
        </div>
        <h2>test2</h2>
</body>




◈ 결과화면


- 처음화면




- h1 태그 영역을 클릭 했을 떄




◈ 설명


위 그림에서 보는 것 같이 h1 태그를 클릭 했을 때 이를 감싸고 있는 div 태그 이벤트도 함께 발생합니다






3. stopPropagation() - 예제2 (사용했을 경우)

◈ 코드


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>
 
<script>
$(document).ready(function () 
{
    $('h1').click(function(event) {
        $(this).css('background-color','yellow');
        event.stopPropagation();
    });
    
    $('div').click(function(){
        $(this).css('background-color','blue');
    });
    
});
</script>
 
<body>
        <div style="border :1px solid #000000">
            <h1 style="border :1px solid #000000">test1</h1>
        </div>
        <h2>test2</h2>
</body>




◈ 결과화면


- 처음화면




- h1 태그 영역을 클릭 했을 떄



◈ 설명


stopPropagation()를 사용함으로써 이벤트 전달을 제거하여 h1 태그에 해당하는 부분만 click 이벤트가 발생하고 div 영역에서는 click 이벤트가 발생하지 않습니다





'[개발]프로그래밍 > jquery' 카테고리의 다른 글

[jquery] 키보드 - 이벤트 정리  (0) 2016.10.20
[jquery] 마우스 - 이벤트 정리  (0) 2016.10.20
[jquery] off() , one() - 이벤트 제거  (0) 2016.10.17
[jquery] hover() - 마우스가 올라왔을 때,떠났을 때  (0) 2016.10.17
[jquery] clone - 객체 복제  (0) 2016.10.14
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday