クリックした要素がある要素内にあるかチェック

Question

  <div id="display-area">
    <p id="targetBtn">- CLICK -</p>
    <div>
      <p>texttexttexttexttexttexttexttext</p>
      <p>texttexttexttexttexttexttexttext</p>
      <div>
        <p>descriptiondescriptiondescription</p>
        <img src="./img/img1.jpg" alt="">
      </div>
    </div>
    <div>
      <p>texttexttexttexttexttexttexttext</p>
      <p>texttexttexttexttexttexttexttext</p>
      <div>
        <input type="text" name="input">
        <button>send</button>
        <div>
          <p>errorerrorerrorerrorerror</p>
          <p>errorerrorerrorerrorerror</p>
        </div>
      </div>
    </div>
  </div>

クリックした要素がある要素内にある要素なのかというチェックを行いたいです。
「ある要素内にある要素」というのは直下の子要素のみならず、孫要素、曾孫要素...も全て含む。
今回の場合だと上記のHTMLのどこをクリックしてもクリックした要素が#display-area又は#display-area内の要素と判定してほしいです。

全ての要素にclassやidをつけて、ある決めたワードがclass又はidに含まれているかというチェックを考えました。

  <div class="display-area" id="display-area">
    <p class="display-area" id="targetBtn">- CLICK -</p>
    <div class="display-area">
      <p class="display-area">texttexttexttexttexttexttexttext</p>
      <p class="display-area">texttexttexttexttexttexttexttext</p>
      <div class="display-area">
        <p class="display-area">descriptiondescriptiondescription</p>
        <img class="display-area" src="./img/img1.jpg" alt="">
      </div>
    </div>
    <div class="display-area">
      <p class="display-area">texttexttexttexttexttexttexttext</p>
      <p class="display-area">texttexttexttexttexttexttexttext</p>
      <div class="display-area">
        <input class="display-area" type="text" name="input">
        <button class="display-area">send</button>
        <div class="display-area">
          <p class="display-area">errorerrorerrorerrorerror</p>
          <p class="display-area">errorerrorerrorerrorerror</p>
        </div>
      </div>
    </div>
  </div>

window.addEventListener("click", (e) => {
	const el = e.target;
	if (el.classList.contains("display-area")) {
		console.log("TRUE");
		// 何かしらの処理
	}
});

これではとても不効率で見栄えも悪いなと思っています。
なので、これより簡単な書き方があればご教授ください。

Comments

[m.ts10806]

>これより簡単な書き方
その「これ」が提示されていないことには比較ができません。

[gogojp]

こちらのわかりにくい説明すみません。
「これ」とは「全ての要素にclassやidをつけて、ある決めたワードがclass又はidに含まれているかというチェック」のことです。
例えば、質問内容に貼り付けたHTMLの要素全てに'display-area'というclass名をつけておいて、clickイベントでel.classList.contains("display-area")のように判定するということです。

[m.ts10806]

ええ、ですから、そのコードを質問本文に追記いただきたいんです。
例えば、ではなく、実際のコードをです。短くてもそれはあなた自身が考えたコードなので、それはそれで回答のためには必要で貴重な情報です。

Answer 1

一行で、

document.addEventListener('click',({target:a})=>
document.getElementById('display-area').contains(a)&&alert ('アウト'), false);

Answer 2

中か外か判定

<script>
window.addEventListener('DOMContentLoaded', function(e){
  document.addEventListener('click',(e)=>{
    console.log(e.target.closest('#display-area')?"in":"out");
  });
});
</script>
before
<div id="display-area">
    <p id="targetBtn">- CLICK -</p>
    <div>
      <p>texttexttexttexttexttexttexttext</p>
      <p>texttexttexttexttexttexttexttext</p>
      <div>
        <p>descriptiondescriptiondescription</p>
        <img src="./img/img1.jpg" alt="">
      </div>
    </div>
    <div>
      <p>texttexttexttexttexttexttexttext</p>
      <p>texttexttexttexttexttexttexttext</p>
      <div>
        <input type="text" name="input">
        <button>send</button>
        <div>
          <p>errorerrorerrorerrorerror</p>
          <p>errorerrorerrorerrorerror</p>
        </div>
      </div>
    </div>
  </div>
after

なおIEなどclosestに対応していないものをサポートするには
polyfillが必要です