クリックイベントを入れ子にした場合の処理のされた方

前提・実現したいこと

モーダルウインドウを自サイトに実装したくて、下記ページを参考にしました。

[ プログラミング ] jQueryでスクロールバーの出るモーダルウィンドウを作る方法
http://coolwebwindow.com/jquery-lab/archives/352

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<title>[DEMO]jQueryでスクロールバーの出るモーダルウィンドウを作る方法</title>
6<script src="js/jquery.js"></script>
7<script>
8$(function(){
9    // スクロールバーの横幅を取得
10    $('html').append('<div class="scrollbar" style="overflow:scroll;"></div>');
11    var scrollsize = window.innerWidth - $('.scrollbar').prop('clientWidth');
12    $('.scrollbar').hide();
13
14    // 「.modal-open」をクリック
15    $('.modal-open').click(function(){
16
17　　　　 alert('モーダルウインドウを開く');
18        // html、bodyを固定（overflow:hiddenにする）
19        $('html, body').addClass('lock');
20
21        // オーバーレイ用の要素を追加
22        $('body').append('<div class="modal-overlay"></div>');
23
24        // オーバーレイをフェードイン
25        $('.modal-overlay').fadeIn('slow');
26
27        // モーダルコンテンツのIDを取得
28        var modal = '#' + $(this).attr('data-target');
29
30         // モーダルコンテンツを囲む要素を追加
31        $(modal).wrap("<div class='modal-wrap'></div>");
32
33        // モーダルコンテンツを囲む要素を表示
34        $('.modal-wrap').show();
35
36        // モーダルコンテンツの表示位置を設定
37        modalResize();
38
39         // モーダルコンテンツフェードイン
40        $(modal).fadeIn('slow');
41
42        // モーダルコンテンツをクリックした時はフェードアウトしない
43        $(modal).click(function(e){
44            e.stopPropagation();
45        });
46
47        // 「.modal-overlay」あるいは「.modal-close」をクリック
48        $('.modal-wrap, .modal-close').off().click(function(){
49            // モーダルコンテンツとオーバーレイをフェードアウト
50            $(modal).fadeOut('slow');
51            $('.modal-overlay').fadeOut('slow',function(){
52                // html、bodyの固定解除
53                $('html, body').removeClass('lock');
54                // オーバーレイを削除
55                $('.modal-overlay').remove();
56                // モーダルコンテンツを囲む要素を削除
57                $(modal).unwrap("<div class='modal-wrap'></div>");
58           });
59        });
60
61        // リサイズしたら表示位置を再取得
62        $(window).on('resize', function(){
63            modalResize();
64        });
65
66        // モーダルコンテンツの表示位置を設定する関数
67        function modalResize(){
68            // ウィンドウの横幅、高さを取得
69            var w = $(window).width();
70            var h = $(window).height();
71
72            // モーダルコンテンツの横幅、高さを取得
73            var mw = $(modal).outerWidth(true);
74            var mh = $(modal).outerHeight(true);
75
76            // モーダルコンテンツの表示位置を設定
77            if ((mh > h) && (mw > w)) {
78                $(modal).css({'left': 0 + 'px','top': 0 + 'px'});
79            } else if ((mh > h) && (mw < w)) {
80                var x = (w - scrollsize - mw) / 2;
81                $(modal).css({'left': x + 'px','top': 0 + 'px'});
82            } else if ((mh < h) && (mw > w)) {
83                var y = (h - scrollsize - mh) / 2;
84                $(modal).css({'left': 0 + 'px','top': y + 'px'});
85            } else {
86                var x = (w - mw) / 2;
87                var y = (h - mh) / 2;
88                $(modal).css({'left': x + 'px','top': y + 'px'});
89            }
90        }
91
92    });
93});
94</script>
95
96<style>
97body {
98    margin:10px;
99    padding:10px;
100    border:10px solid #ddd;
101}
102
103.lock {
104    overflow:hidden;
105}
106
107.modal-content {
108    position:relative;
109    display:none;
110    width:50%;
111    margin:30px;
112    padding:10px 20px;
113    border:2px solid #aaa;
114    background:#fff;
115}
116
117.modal-content p {
118    margin:0;
119    padding:0;
120}
121
122.modal-overlay {
123    z-index:1;
124    display:none;
125    position:fixed;
126    top:0;
127    left:0;
128    width:100%;
129    height:120%;
130    background-color:rgba(0,0,0,0.75);
131}
132
133.modal-wrap {
134    z-index:2;
135    display:none;
136    position:fixed;
137    top:0;
138    left:0;
139    width:100%;
140    height:100%;
141    overflow:auto;
142}
143
144.modal-open {
145    color:#00f;
146    text-decoration:underline;
147}
148
149.modal-open:hover {
150    cursor:pointer;
151    color:#f00;
152}
153
154.modal-close {
155    color:#00f;
156    text-decoration:underline;
157}
158
159.modal-close:hover {
160    cursor:pointer;
161    color:#f00;
162}
163</style>
164</head>
165<body>
166<a data-target="con1" class="modal-open">リンク1</a>
167<a data-target="con2" class="modal-open">リンク2</a>
168<a data-target="con3" class="modal-open">リンク3</a>
169<a data-target="con4" class="modal-open">リンク4</a>
170<a data-target="con5" class="modal-open">リンク5</a>
171
172<div id="con1" class="modal-content">
173    <p><a href="./">リンク1の内容です。</a>・・・</p>
174    <p><a class="modal-close">閉じる</a></p>
175</div>
176<div id="con2" class="modal-content">
177    <p><a href="./">リンク2の内容です。</a>・・・</p>
178    <p><a class="modal-close">閉じる</a></p>
179</div>
180<div id="con3" class="modal-content">
181    <p><a href="./">リンク3の内容です。</a>・・・</p>
182    <p><a class="modal-close">閉じる</a></p>
183</div>
184<div id="con4" class="modal-content">
185    <p><a href="./">リンク4の内容です。</a>・・・</p>
186    <p><a class="modal-close">閉じる</a></p>
187</div>
188<div id="con5" class="modal-content">
189    <p><a href="./">リンク5の内容です。</a>・・・</p>
190    <p><a class="modal-close">閉じる</a></p>
191</div>
192<p>
193クリックしてみてください。ウィンドウより大きいモーダルウィンドウにはスクロールバーが出ていると思います。<br>
194</p>
195<p><a href="http://coolwebwindow.com/jquery-lab/archives/352">&lt;&lt; 記事に戻る</a></p>
196</body>
197</html>

コードをほぼコピペしてモーダルウインドウを実装できたのですが、分からないことがあります。

15行目でモーダルウインドウを表示するためのクリックイベントを定義してます。

javascript
1$('.modal-open').click(function(){

その後、この定義したクリックイベントを閉じる前に、モーダルウインドウを閉じるクリックイベントを定義しています。

javascript
1//46行目
2$('.modal-wrap, .modal-close').off().click(function(){

なぜこれで動くのでしょうか？

私の認識ではこんな感じで開く処理を閉じる処理は別々に記述すると思っていました。

javascript
1
2$('.modal-open').click(function(){
3
4//モーダルウインドウを開く処理
5
6});
7
8
9$('.modal-wrap, .modal-close').off().click(function(){
10
11//モーダルウインドウを閉じる処理
12
13});

今回参考にしたコードはこうなってますよね？

javascript
1
2$('.modal-open').click(function(){
3
4//モーダルウインドウを開く処理
5
6//開く処理の途中で閉じる処理
7$('.modal-wrap, .modal-close').off().click(function(){
8
9//モーダルウインドウを閉じる処理
10
11});
12
13});