jquery - 要素内をクリックしたかどうかを確認する方法

Question

ボタンのように機能する div 要素があります。この div には、より多くの子 div やスパン、画像などを含めることができます (実際に含めます)。また、div には、サブメニューを下にスライドさせる「クリック」イベントがあります。

ボタンをクリックするたびにそのサブメニューを表示および非表示にしようとしていますが、ページのどこにいてもボタンの外側をクリックすると非表示にしようとしています。

私の問題は、ページに複数のボタンがあるevent.stopPropagation()ため、ボタンをクリックしてサブメニューが表示されてから別のボタンをクリックするとevent.stopPropagation()、最初の div がサブメニューを非表示にできないため、機能しないことです。

ターゲットはクリックしている要素を返すため、ボタンをクリックしたかどうかを確認するために使用できませんevent.target。これは、ボタン内の画像またはボタン内の div 内の div であり、移動したくありません.parent().parent()...それが実際に私のボタンかどうかを確認します。

これが google.com、jQuery UI datepicker、およびおそらく他の 100 万のサイトで行われているのを見たことがあります。

ボタン要素のマークアップは次のとおりです。

<div id="testButton" role="button">
 <div>xxxxx</div>
 <div>xxxxx</div>
 <span>john doe</span>
</div>

そして、これまでのJavaScriptは次のとおりです。

(function($){
$.fn.button = function(options) {
    var defaults = {

    }
    var options = $.extend(defaults, options);

    return this.each(function() {
        var button = $(this);
        button.addClass('button');

        button.on({
            mouseover: function() {
                button.addClass('hover');
            },
            mouseout: function() {
                button.removeClass('hover');
            },
            click: function(e) {
                button.toggleClass('clicked');
            }
        });

        $(document).click(function(event){

            console.log($(button).find(event.target));

//              var element = event.target;
//              
//              if ($(element) != $(button)) {
//                  if (button.hasClass('clicked')) {
//                      button.removeClass('clicked');
//                  }
//              }
        });
    });
};  
 })(jQuery);

ありがとう。