タブメニューでの確認ダイアログの使用について

実現したいこと

Javascriptを使ったタブメニューの作り方をWebで検索し，実装しました。
タブメニュー3つのうち1つのみ（TabC），クリック時に確認ダイアログを表示し，
キャンセルがクリックされた場合はそのタブを開けないようにしたいと考えています。

発生している問題

現在のコードだと，確認ダイアログは表示されますが，
Cancelを押しても当該のタブが表示されてしまいます。
Cancelを押した場合は現在のタブに止まるようにするにはどうしたらいいか，
ご教示いただけますと幸いです。

該当のソースコード

HTML
<div class="navi">
  <ul class="tab-group">
    <li class="tab tab-A is-active">Tab A</li>
    <li class="tab tab-B">Tab B</li>
    <li class="tab tab-C" id="btn">Tab C</li>  
 </ul>
</div>

<div class="panel-group">
  <div class="panel tab-A is-show">
     <iframe class="tabcon" src="XX.html" width="100%" height="550px" ></iframe>
  </div>
  <div class="panel tab-B">
     <iframe class="tabcon" src="XX.html" width="100%" height="900px"></iframe>
   </div>
   <div class="panel tab-C">
     <iframe class="tabcon" src="XX.html" width="100%" height="900px"></iframe>
   </div>
</div>

Javascript
document.addEventListener('DOMContentLoaded', function(){
    // タブに対してクリックイベントを適用
    const tabs = document.getElementsByClassName('tab');
    for(let i = 0; i < tabs.length; i++) {
      tabs[i].addEventListener('click', tabSwitch, false);
    }
  
    // タブをクリックすると実行する関数
    function tabSwitch(){
      // タブのclassの値を変更
      document.getElementsByClassName('is-active')[0].classList.remove('is-active');
      this.classList.add('is-active');
      // コンテンツのclassの値を変更
      document.getElementsByClassName('is-show')[0].classList.remove('is-show');
      const arrayTabs = Array.prototype.slice.call(tabs);
      const index = arrayTabs.indexOf(this);
      document.getElementsByClassName('panel')[index].classList.add('is-show');
    };
  }, false);

const btn = document.getElementById('btn')
btn.addEventListener('click', function(event) {
    var result = window.confirm('リンクを開きますか？');
    if(!result) {
         event.preventDefault();
    }
})