[jQuery] 指定した要素以外をクリックしたかどうか判定する

投稿日：2018年4月20日更新日：2018年5月2日

指定した要素以外をクリックしたかどうか判定する

サンプルソース

例）指定した要素以外をクリックしたかどうか判定するサンプル

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>指定した要素以外をクリックしたかどうか判定するサンプル</title>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function(){

  $(document).click(function(){
    var a = $(event.target).closest('#area').length;
    if(a){
      alert("Hogeをクリックしました");
    }else{
      alert("Hoge以外をクリックしました");
    }
  });

});
</script>
</head>
<body>
  <div id="area">Hoge</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>指定した要素以外をクリックしたかどうか判定するサンプル</title>

$(document).ready(function(){

$(document).click(function(){

var a = $(event.target).closest('#area').length;

if(a){

alert("Hogeをクリックしました");

}else{

alert("Hoge以外をクリックしました");

}

});

</script>

</head>

<body>

</body>

</html>

解説

closestは、引数で指定した直近の祖先要素を返すメソッドです。
クリックした位置に指定要素があれば、lengthで1が返るのを利用しています。

執筆者：とら