条件分岐でイベントのキャンセルをしたいです。

Question

前提・実現したいこと

指定した変数が空白の場合、イベントのキャンセルをしたいです。

発生している問題・エラーメッセージ

if文で変数が空白の場合という条件分岐はできたのですが、イベントのキャンセルができません。

該当のソースコード

  const corporateSaveButton = document.getElementById("save-id");
  corporateSaveButton.addEventListener("click", function(e){
    var corporateLabelArea = document.getElementsByClassName("corporate-data")
    var corporateTextArea = document.getElementsByClassName("corporate-text")
    const corporateButton = document.getElementById("js-corporate-button")
    const corporateFormButton = document.getElementById("button-box")
    const corporateId = document.getElementById("js-corporate-id")
    if (corporateTextArea[0].value == '') {
      console.log('test')
      e.preventDefault();
    }

    for(let i = 0; i < 14; i++) {
      var corporateText = new FormData();
      corporateText.append("@corporate.name", corporateTextArea[i].value);
      var request = new XMLHttpRequest();
      request.open("PATCH", "/corporates/"+corporateId.value, true);
      request.send(corporateText);
      corporateFormButton.style.display = "block";
      corporateLabelArea[i].style.display = "block";
      corporateTextArea[i].style.display = "none";
      corporateButton.style.display = "none";

    }
    
  });

<input style="display: none;" id="js-corporate-id" value=<%= @corporate.id %>>
<div class='main'>
  <div class='corporate-show'>
    <%= form_with model: @corporate, local: true do |f| %>
    <%= render 'shared/error_messages', model: f.object, id:'error' %>
    <div class='list-title-show'>
      <h2 class='corporate-data'>
        <%= @corporate.name %>
      </h2>
      <div id="js-textarea-corporate" class="list-title-edit">
        <%= f.text_field :name, style:"display: none;", value:@corporate.name, class:'corporate-text', id:'corporate_name', maxlength:'150' %>
      </div>
    </div>
    <div class='corporate-info'>
      <p class='corporate-data'>
        <%= @corporate.industry %>
      </p>
      <%= f.text_field :industry, style:"display: none;", value:@corporate.industry, class:'corporate-text', id:'corporate_industry', maxlength:'50' %>
      <p class='corporate-data'>
        <%= @corporate.others %>
      </p>
      <%= f.text_area :others, style:"display: none;", value:@corporate.others, class:'corporate-text', id:'corporate_others', maxlength:'2000' %>
      <div id="button-box">
        <div class='form-btn-box'>
          <span class="form-btn", id="js-edit-corporate-btn">編集</span>
          <%=link_to 'もどる', root_path, class:"back-btn" %>
        </div>
      </div>
      <div class='form-btn-box' id="js-corporate-button" style="display: none;">
        <button data-update type="submit" id = "save-id" class="form-btn">変更</button>
        <button data-cancel type="button" id = "cancel-id" class="edit-back-btn">キャンセル</button>
      </div>
    </div>
    <% end %>
  </div>
</div>

試したこと

上記で述べたようにconsole.log()を用いて確認したところ表示されたため条件分岐自体はできていると考えています。
イベントのアクション中にpreventDefault()でアクションのキャンセルを行うことはできないのでしょうか？

補足情報（FW/ツールのバージョンなど）

他に使用しているwebアプリケーションはrailsです。

初心者のため至らない点は多くあると思いますが、ご助言頂けると幸いです。

Answer 1

キャンセルとはどのような意味でしょうか？

1. 「イベント関数内の処理を中断する」と言う意味でしょうか？（return構文で実現できませんか？）
2. 「イベント伝搬を中断する」と言う意味でしょうか？（e.stopPropagation() or e.stopImmediatePropagation()で実現できませんか？）
3. 「イベントのデフォルト動作を防ぐ」と言う意味でしょうか？（e.preventDefault()で実現できませんか？この場合、イベントがキャンセル可能である必要があります）

（3. ではないのだと考えますが、 1.2. のどちらなのか質問文からは判断できません）

Comments

[tamagokake]

質問文に情報が不足しており申し訳ありません。
イベント関数内の処理を中断したい状況でした。return構文で実現することができました。
ありがとうございました！