Nested accordion trigger event show and hide to its parents

Expected behavior

The event should be triggered only in the target collapse component, not in its parent elements.

Actual behavior

All *.mdb.collapse events (show, hide, shown, and hidden) are propagated up the DOM, even if no data-mdb-target is defined.

Resources (screenshots, code snippets etc.)

https://jsfiddle.net/8fj74mpu/25/

// Even when filtering by the event target, the invoked event cannot be isolated to the correct accordion; it always propagates up the DOM.

$('.accordion-collapse').on('show.mdb.collapse', function (e) {
   if (e.target === this) {
      console.log('show: ', $(e.currentTarget).attr('id'));
   } 
});

DOM:

<!-- Nested accordion example -->
<div class="accordion" id="level_1">
  <div class="accordion-item">
    <h2 class="accordion-header" id="level_1_menu_1">
      <button
        data-mdb-collapse-init
        class="accordion-button collapsed"
        type="button"
        data-mdb-target="#level_1_collapse_1"
      >
        Menu #1
      </button>
    </h2>
    <div id="level_1_collapse_1" class="accordion-collapse collapse">
      <div class="accordion-body">

        <!-- Nest another accordion -->
        <div class="accordion" id="level_2">
          <div class="accordion-item">
            <h2 class="accordion-header" id="level_2_menu_1">
              <button
                data-mdb-collapse-init
                class="accordion-button collapsed"
                type="button"
                data-mdb-target="#level_2_collapse_1"
              >
                Submenu #1.1
              </button>
            </h2>
            <div id="level_2_collapse_1" class="accordion-collapse collapse">
              <div class="accordion-body">Content 1.1</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>