How to capture click events on parent elements when multiple listeners are registered without triggering on the wrong parent

Click bubbling capturing

<style>
.buy {
  margin-bottom: 20px;
}
</style>

<div class='container'>

    <div class='mini-basket'>
      
      <button class='buy'>Buy Mini Basket</button>
      
        <div class='basket-inner'>
          <button class='buy'>Buy basket inner</button> 
        </div>
  
    </div>
    <button class='buy'>Out of basket</button>
  
</div>

<script>

  var BuyButton = (function() {

    function BuyButton(parent = document.body) {

      if(!(this instanceof BuyButton)) {
        return new BuyButton(parent);
      }
      this.parent = parent instanceof HTMLElement ? parent : document.querySelector(parent);
      this.boundClickReference = this.onClick.bind(this);
      this.parent.addEventListener('click', this.boundClickReference, false);

    }

    var _$ = BuyButton.prototype;

    _$.onClick = function(evt) {
      evt.preventDefault();
      this.catchClick(evt, evt.target || evt.srcElement);
    };

    _$.catchClick = function(evt, target) {
      var parent = target.parentNode;
      while(parent) {
        if(parent === this.parent) {
          evt.stopPropagation();
          this.onCapture(target);
          return;
        }
        parent = parent.parentNode;
      }
    };

    _$.onCapture = function(target) {
      console.log('Found!!', target, this.parent);
    };

    return BuyButton;

  })();

  var inner = BuyButton('.basket-inner');
  var mini = BuyButton('.mini-basket');
  var con = BuyButton('.container');
  // var noSelector = BuyButton(); // works too

</script>