label要素でclickイベント発火時、対応するフォーム部品でもclickイベントが発火する挙動を阻止する

HTML

<div id="target">
  <fieldset>
    <legend>label要素配下にフォーム部品がある場合</legend>
    <p><label>input[type=text]<input type="text" /></label></p>
    <p><label>button<button>button</button></label></p>
    <p><label>select<select><option value="dog">Dog</option></select></label></p>
    <p><label>textarea<textarea>Dog</textarea></label></p>
    <p><label>output<output >output</output ></label></p>
    <p><label>progress<progress id="file" max="100" value="70">70%</progress></label></p>
    <p><label>meter<meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="50">at 50/100</meter></label></p>
  </fieldset>
  <fieldset>
    <legend>label要素のfor属性値に対応するフォーム部品がある場合</legend>
    <p><label for="foo">input[type=text]</label><input id="foo" type="text" /></p>
  </fieldset>
  <fieldset>
    <legend>label要素に対応するフォーム部品がない場合</legend>
    <p><label>label</label></p>
  </fieldset>
</div>

<ul>
 <li><a href="https://teratail.com/questions/jhjf6qsbclyt9a">labelのクリックで入力エレメントが起こすclickイベントを区別する方法があるか</a></li>
</ul>

JavaScript

'use strict';            
document.getElementById('target').addEventListener('click', function handleClick (event) {
  const target = event.target, htmlFor = target.htmlFor ? target.ownerDocument.getElementById(target.htmlFor): null;
  if (target.tagName === 'LABEL' &&
    (target.querySelector('input,button,select,textarea,output,progress,meter') ||
    htmlFor && ['INPUT','BUTTON','SELECT','TEXTAREA','OUTPUT','PROGRESS','METER'].includes(htmlFor.tagName))
  ) return;
  console.log(event.type, target);
}, false);