JS/jQueryでモーダルの領域外をクリックしたとき下にある要素のイベントが発火してしまう
// リストをクリックで背景色切り替え
$('#list li').on('click', function() {
$(this).toggleClass('active');
});
// モーダルを閉じる
$(document).on('click', function() {
$('#modal').removeClass('active');
});
// モーダルの中身をクリックしても閉じないように
$('#modal').on('click', function(event) {
event.stopPropagation();
});
// ボタンをクリックでモーダル表示/非表示
$('#button').on('click', function(event) {
event.stopPropagation();
$('#modal').toggleClass('active');
});* {
margin: 0;
padding: 0;
}
#list li {
display: block;
}
#list li:nth-child(even) {
background: #ddd;
}
#list li.active {
background: rgba(0, 0, 255, .4);
}
#modal {
visibility: hidden;
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 100px;
color: #fff;
background: blue;
transform: translate(-50%, -50%);
}
#modal.active {
visibility: visible;
}<button id="button">モーダルを開く</button>
<ul id="list">
<li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li>
</ul>
<div id="modal">モーダル</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>スニペットを次の順番で実行してみてください。
① モーダルを開くボタンをクリック
② モーダルの領域外をクリック（モーダルが閉じる）
③ モーダルは閉じるがその下のリストの背景色まで変わってしまう
領域外をクリックしてもリストの背景色は変えたくない場合、以下のようにJSのコードを一部修正し、例外処理するほかないのでしょうか？
// リストをクリックで背景色切り替え
$('#list li').on('click', function() {
// 追加した例外処理
if ($('#modal').hasClass('active')) return;
$(this).toggleClass('active');
});
// モーダルを閉じる
$(document).on('click', function() {
$('#modal').removeClass('active');
});
// モーダルの中身をクリックしても閉じないように
$('#modal').on('click', function(event) {
event.stopPropagation();
});
// ボタンをクリックでモーダル表示/非表示
$('#button').on('click', function(event) {
event.stopPropagation();
$('#modal').toggleClass('active');
});* {
margin: 0;
padding: 0;
}
#list li {
display: block;
}
#list li:nth-child(even) {
background: #ddd;
}
#list li.active {
background: rgba(0, 0, 255, .4);
}
#modal {
visibility: hidden;
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 100px;
color: #fff;
background: blue;
transform: translate(-50%, -50%);
}
#modal.active {
visibility: visible;
}<button id="button">モーダルを開く</button>
<ul id="list">
<li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li>
</ul>
<div id="modal">モーダル</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>今回はイベントを設定しているのがリスト部分だけなのですが、モーダルの領域外部分に他の要素などがある場合、その都度例外処理を追加しなければならなくて汎用性がありません。
何かスマートな方法があれば教えてください。よろしくお願いします。