対象のボタン以外をクリックしたことを判定する方法

Question

JavaScript、jQueryで、対象のボタン以外をクリックしたことを判定したいです。
宜しくお願い致します。

###前提・実現したいこと
下記３つの機能を実現したいです。（文末に補足して４つにしました）

➀ボタンクリックでメニュー表示
➁もう一度クリックでメニュー非表示
➂ボタン以外のクリックでメニュー非表示

###発生している問題・エラーメッセージ
上の３つのうち１つずつは実現できました。
ですが３つを組み合わせると実現できません。

エラーはありません。

###試したこと
こちらがその表示切替コードになります。
それぞれは動くのですが、どこを直せば➀➁➂がすべて動くようになりますでしょうか？

<p>こんにちは</p>
<div class="E">
  <button type="button">メニュー</button>
</div>

<p>こんばんは</p>
<div class="E">
  <button type="button">メニュー</button>
</div>

// メニュー
var menus = `
  <ul class="menus">
  	<li>たべる</li>
  	<li>さわる</li>
  </ul>
`;

// ➀ボタンクリックでメニュー表示
$(document).on('click','.E > button:not(.is_click)', function(){
  $(this).addClass('is_click');
  $(this).after(menus);
});

// ➁もう一度クリックでメニュー非表示
$(document).on('click','.E > button.is_click', function(){
  $(this).removeClass('is_click');
  $(this).next('.menus').remove();
});

// ➂ボタン以外のクリックでメニュー非表示
$(document).on('click',function(e) {
  if(!$(e.target).closest('.E > button:not(.is_click)').length) {
    $('.E > button').removeClass('is_click');
    $('.menus').remove();
  }		 
});

###補足
すみません、補足です。

➃複数のメニューが同時に表示されることは避けたい。

たとえば「こんにちは」のメニューを開いてる最中に、「こんばんは」のメニューを開いたら、「こんばんは」のメニューだけを表示できればと思っています。

Comments

[m.ts10806]

CSSもご提示ください。

[yambejp]

とりあえず<il>を<li>に修正してください

[narutona]

CSSはないです。すみません、HTML修正いたしました。

[m.ts10806]

なるほどis_clickはフラグ替わりですね。何かしら装飾をしているのかと思ってました。了解です。

[narutona]

すみません、is_clickまぎらわしかったですね。

[m.ts10806]

いえいえ。コード最後までちゃんと見てれば分かったので、私の見逃しです

[narutona]

お世話になっております。おかげさまで解決いたしました。また機会がありましたら宜しくお願い致します。

Answer 1

こんにちは

とり急ぎの対応で最小限の修正で済ませるとすれば、➂ボタン以外のクリックでメニュー非表示 の if 条件に、以下のように、 e.target.tagName !== 'BUTTON' を追加すると、いかがでしょうか。

修正前：

if(!$(e.target).closest('.E > button:not(.is_click)').length) {

• 動作確認用： https://jsfiddle.net/jun68ykt/075drj2f/1/

　　

修正後：

if(e.target.tagName !== 'BUTTON' && !$(e.target).closest('.E > button:not(.is_click)').length) {

• 動作確認用： https://jsfiddle.net/jun68ykt/075drj2f/2/

修正前だと、メニューが閉じているときにボタンをクリックしたときにも③のif の中が実行されてしまうので、修正後ではこれを防いでいます。

追記1

@narutonaさん

上記の回答では、ご質問に追加されている補足を満たすものになっていませんでした。追って補足も満たすものを検討します。

追記2

以下で要件を満たせているのではないかと思います。

const openMenu = function(button) {
  button.after(`
    <ul class="menus">
      <li>たべる</li>
      <li>さわる</li>
    </ul>`
  ).addClass('is_click');
}

const closeMenu = function(button) {
  button
    .removeClass('is_click')
    .siblings('.menus')
    .remove();
};

$('.E').on('click', function(e) {
  const t = $(e.target);
  if (t.attr('type') === 'button') {
    if (t.hasClass('is_click')) {
      closeMenu(t);
    } else {
      closeMenu($('.E > button.is_click'));
      openMenu(t);
    }
  } else if (t.hasClass('menus') || t.parent().hasClass('menus')) {
    closeMenu($('button', this));
  }
});

以下は上記のコードを動作確認するために、jsFiddle に上げたものです。動作確認のため、スタイルを追加し、また、ボタンを4個に増やしています。

• 動作確認用： https://jsfiddle.net/jun68ykt/dbz0mknt/3/

追記3

先ほどの追記2のコードを、なるべくロジックを追いやすくなるように修正しました。

const MENUS_HTML = `
  <ul class="menus">
    <li>たべる</li>
    <li>さわる</li>
  </ul>
`;


$.fn.menus = function(cmd, menus) {
  switch (cmd) {
    case 'open':
      this.addClass('is_click')
          .after(menus);
      break;
    case 'close':
      this.removeClass('is_click')
          .siblings('.menus')
          .remove();
      break;
    default:
      break;
  }
};


$('.E').on('click', function({ target }) {
  const e = $(target);
  switch (target.tagName) {
    case 'BUTTON':
      if (e.hasClass('is_click')) {
        e.menus('close');
      } else {
        $('.E > .is_click').menus('close');
        e.menus('open', MENUS_HTML);
      }
      break;
    case 'UL':
    case 'LI':
      $('.is_click', this).menus('close');
      break;
    default:
      break;
  }
});

• 動作確認用： https://jsfiddle.net/jun68ykt/dbz0mknt/5/

以上、参考になれば幸いです。

Comments

[narutona]

色々な案をありがとうございます。メニューを引数にすれば別のメニューを表示するときにも使いまわせるコードになりますし、何よりswichというメソッドはとても便利で、大変勉強になりました。これから参考にさせて頂きたいコードとして、永久保存版です。
ただ「それ以外の場所でのクリックでメニューを閉じる」というのが実現できませんでした。質問がわかりにくかった中で考えを巡らせてくださってありがとうございます。

[jun68ykt]

どういたしまして。解決されたようでよかったです ????

> ただ「それ以外の場所でのクリックでメニューを閉じる」というのが実現できませんでした。

とのことだったので、追記3 で作成したコードに若干コードを追加して

https://jsfiddle.net/jun68ykt/dbz0mknt/7/

を作成しました。これは、

$(document).on('click', function(){
$('.is_click').menus('close');
});

を追加することで、「それ以外の場所でのクリックでメニューを閉じる」を実現していますが、div の中をクリックしたときに、上記が呼ばれないように $('.E').on　に与えるコールバックの中で

event.stopPropagation();

を使っています。この行をコメントアウトすると、「メニュー」をクリックしてもメニューは開きません。

[narutona]

たびたびありがとうございます。わたしの自称自己解決しょぼっしょぼコードからベストアンサーをはずし、改めてこちらを選ばせて頂きます。それにしても、ご提示のコードは本当にとても勉強になりました。感謝です。

[jun68ykt]

ありがとうございます。回答者冥利に尽きます。今後の学習が捗ることを祈念しております。草々

Answer 2

.menuは付加したり削除したりしないといけないのでしょうか？

<script>
$(function(){
  $('.menus').hide();
  $(document).on('click','*',function(e){
    if($('.E button').index(this)>=0){
      $('.menus').toggle();
      e.stopPropagation();
    }else{
      $('.menus').hide();
    }
  });
});
</script>
<p>こんにちは</p>
<div class="E">
  <button type="button">メニュー</button>
</div>

<p>こんばんは</p>
<div class="E">
  <button type="button">メニュー</button>
</div>

<ul class="menus">
<li>たべる</li>
<li>さわる</li>
</ul>

調整版

<script>
$(function(){
  var menus = `
  <ul class="menus">
      <li>たべる</li>
      <li>さわる</li>
  </ul>
`;
  $(document).on('click','*',function(e){
    if($('.E button').index(this)>=0){
      $('.E').not($(this).closest('.E')).find('.menus').remove();
      if($(this).closest('.E').find('.menus').length>0) $('.menus').remove();
      else $(this).after(menus);
      e.stopPropagation();
    }else{
      $('.menus').remove();
    }
  });
});
</script>

<p>おはよう</p>
<div class="E">
  <button type="button">メニュー</button>
</div>

<p>こんにちは</p>
<div class="E">
  <button type="button">メニュー</button>
</div>

<p>こんばんは</p>
<div class="E">
  <button type="button">メニュー</button>
</div>

Comments

[narutona]

そうですね、できればいちいち付加したり削除したりしたいと思っています。ソースコードありがとうございます。勉強になります。

[yambejp]

＞ 付加したり削除したりしたい

そうなるとどこに付加したいのか曖昧です。
ボタンの後ろですか？
その場合ボタンが複数あったり.Eが複数あったりした場合どうするのでしょうか？

[narutona]

>ボタンの後ろですか？
はい、ボタンの後ろで考えています。つまり「.E」の中に「buttton」と「.menus」が並び、「.menus」が弟になる感じです。

>その場合ボタンが複数あったり.Eが複数あったりした場合
それらは実際に複数ありまして、表示メニューは常に１つを考えています。
これついては補足した➃の条件になりまして、クリックされた方のメニューだけが存在することになればと思っています。

[yambejp]

追記しました、こんな感じでしょうか？

[narutona]

すみません、チェックボックスになることは予想外でした。あと補足した➃の条件が実現できないようでした。質問がわかりにくかった中で考えを巡らせてくださってありがとうございます。

Answer 3

CSSにトグル処理を任せると、シンプルに書けます。
(モバイル環境の為、コード未検証)

<style>
.menu-open, .menu-open:not(:checked)+.menu {
  display: none;
}
</style>
</head>
<body>
<label><input type="checkbox" class="menu-open">メニューA</label>
<ul class="menu">
  <li>たべる</li>
  <li>さわる</li>
</ul>
<label><input type="checkbox" class="menu-open">メニューB</label>
<ul class="menu">
  <li>たべる</li>
  <li>さわる</li>
</ul>
<script>
jQuery(document).on('click', function (event) {
  var target = event.target, thisInput = target.querySelector('input.menu-open');

  jQuery('input.menu-open:checked').filter(input => inpiut !== thisInput).prop('checked', false);
});
</script>

Re: narutona さん

Comments

[narutona]

入力しにくい中でありがとうございます。

動作しなかったみたいです。（https://jsfiddle.net/hvxe5yu4/）
CSSの「+ .menu」の階層が違うために、「dislay:none;」が効かないのだと思います。

あと今回はメニューをJSでいちいち挿入する方法を考えていたので、ご提示のように初めからHTMLに書かれている方法は少しイメージと違いました。

Answer 4

素人があれこれ考えた結果でお目汚しかと思いますが、下記で実現したかった➀➁➂➃がすべてできました。
（https://jsfiddle.net/bkfer0zo/）

ご回答いただいたyambejp様、jun68ykt様、think49様、そしてご意見をくださったmts10806様、皆様どうもありがとうございました。

// メニュー
var menus = `
  <ul class="menus">
      <li>たべる</li>
      <li>さわる</li>
  </ul>
`;

// ➀ボタンクリックでメニュー表示
// ➃複数のメニューが同時に表示されることは避けたい。
$(document).on('click','.E > button:not(.is_click)', function(e){
  e.stopPropagation();
  $('.menus').remove();
  $(this).addClass('is_click');
  $(this).after(menus);
});

// ➁もう一度クリックでメニュー非表示
// ➂ボタン以外のクリックでメニュー非表示
$(document).on('click','body', function(){
  $('.E > button').removeClass('is_click');
  $('.menus').remove();
});

// ついでにメニュー項目のクリックでメニューが閉じないようにする。
$(document).on('click','.menus li', function(e){
  e.stopPropagation();
  const menu = $(this).text();
  alert('実行するメニューは'+menu+'です。');
});

Comments

[narutona]

改めてjun68ykt様から高度でスマートな解決策を教えて頂いたため、ベストアンサーをそちらに変更致しました。