jQueryによるクリック範囲の限定化

Question

  <section class="ham">
            <h2>
              test
            </h2>
            <div class="ham_content">
              <div class="ham2">
                <ul>
                    <li>a</li>
                    <li>b</li>
                    <li>c</li>
                </ul>
              </div>
                contents
              </div>
          </section>

上記はハンバーガーメニューのソースコードになっているのですが、hamクラスの範囲をクリックするとアコーディオンが開いたり閉じたりするようになっています。
ただ1つ問題があり、アコーディオンを開いた後にham2クラスの範囲をクリックしてもアコーディオンが閉じてしまいます。
ham2クラスの部分に別のクリック動作を実装したいので、ham2クラスの範囲をクリックするとアコーディオンが閉じるのでは困るという事情があります。
そこで

$(".ham").on('click',function(){}

の部分を

$(".ham").not(".ham2").on('click',function(){}

のようにham2範囲だけ除外すればいいと思いましたが全くうまくいきません。
不思議なのですがどうしてうまくいかないのでしょうか。
また、ham範囲からham2範囲を除外したエリア内だけをクリックした時にアコーディオンが閉じるという動きに変えることは可能でしょうか。

Comments

[kei344]

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況を質問文に追記ください。

[kantowebmanager]

すみませんでした。解決済にさせていただきたいと思います。

Answer 1

kszk311さんの回答でいいと思いますが、clickはバブリングするのでstopPropagation()を使う手もあります。

$('.ham2').on('click', function(event) {
  event.stopPropagation();
});

https://api.jquery.com/event.stoppropagation/

Comments

[kantowebmanager]

ありがとうございます。
こちらの方法は非常にシンプルに実現できました。
バブリングという現象知りませんでした。
基本的なことだとは思うのですがstopPropagation()はイベントオブジェクトだけが持っているプロパティなのでしょうか（最初はstopPropagation()プロパティは「$('.ham2').stopPropagation()」のように使うものなのかと思っていました）。

[x_x]

そうです。ネイティブではここになります。
https://developer.mozilla.org/ja/docs/Web/API/Event/stopPropagation

[kantowebmanager]

このたびはありがとうございます。
一歩前に進めた気がします。

Answer 2

$(function(){
	$('.ham').click(function(e){
		if($(e.target).is('.ham2') || $(e.target).parents('.ham2').length > 0){
			//ham2の処理
			console.log('ham2');
		}else{
			//hamの処理
			console.log('ham');
		}
	});
})

Comments

[kantowebmanager]

ご回答ありがとうございます。
無事に実現できました。
少しお聞きしたいのですが、$(e.target).is('.ham2')を「$(e).is('.ham2')」にすると効かなくなりますがこれはどうしてでしょうか。
eはイベントオブジェクトでクリックしたときのイベント情報がeに格納されているのだと思いますが、targetは調べたらeのDOM要素を取得しているようですがeとe.targetの違いがわかりませんでした。。

[kszk311]

$(e).is('.ham2')で動作しないのは、eがDOMではないからです。
eはイベント情報、e.targetはイベント発生源である要素なので、$(e.target)とする事で、クリックされた要素を取得しています。

[kantowebmanager]

そうなんですね。
イベントオブジェクトだけは自動的に要素にはならないのでしょうか。
$("div")や＄(".test")のようなjqueryオブジェクトは何も意識しなくても自動的にDOM要素として扱われているように思っていたのすがイベントオブジェクトだけは特別なのでしょうか。