title: Determine clicked child whilst it's parent has it's own click listener
body: <p>I have multiple accordion widgets on page.</p>
  
  <p>To elaborate on how it's all setup</p>
  
  <ul>
  <li>The green heading as shown in the image below, is the handle for jQuery UI sortable</li>
  <li>The green heading also has a click listener which collapses/expands the accordion.</li>
  <li>The edit button has it's own click listener which when fired does as intended but will also fire the listener to collapse the accordion</li>
  </ul>
  
  <p>Is it possible to get the ACTUAL element that was clicked so that I can check that it was not the edit/save/discard etc buttons?</p>
  
  <p>My accordion JS is:</p>
  
  <pre><code>this.accordion = function () {
      var element = $('.accordion &gt; .panel-heading');
  
      element.on('click', function () {
          var self = $(this);
          if (self.hasClass('open')) {
              self.parent().find('.panel-body').stop().slideUp();
              self.find('.fa-caret-down').removeClass('fa-caret-down').addClass('fa-caret-up')
              self.removeClass('open');
              return;
          }
  
          self.addClass('open');
          self.find('.fa-caret-up').removeClass('fa-caret-up').addClass('fa-caret-down')
          self.parent().find('.panel-body').stop().slideDown();
      });
  }
  </code></pre>
  
  <p>My obviously incomplete "Edit" JS is:</p>
  
  <pre><code>this.editableWidgets = function () {
  
      var edit = $('.panel .widgetBtn_edit');
      var save = $('.panel .widgetBtn_save');
      var discard = $('.panel .widgetBtn_discard');
  
      edit.on('click', function () {
          $(this).hide();
          $(this).next('.widgetBtn_save').show();
          $(this).next().next('.widgetBtn_discard').show();
      });
  
      save.on('click', function () {
          alert('hook up saving functionality')
      })
  
      discard.on('click', function () {
          $(this).hide();
          $(this).prev('.widgetBtn_save').hide();
          $(this).prev().prev('.widgetBtn_edit').show();
      })
  
  }
  </code></pre>
  
  <p><strong>Fig 1</strong></p>
  
  <p>Before = Before clicking Edit</p>
  
  <p>After = After clicking Edit</p>
  
  <p><a href="https://i.stack.imgur.com/cQXVP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cQXVP.png" alt="Figure 1"></a></p>