イベントBubbling、実際にクリックしたい部分を指定

条件文を作成し、実際にクリックした内容がJavaScriptでインポートしたものと同じかどうかを尋ねます。

e.target === document.querySelectorAll(".tab-button")[0]

jQueryをインポートするとエラーが発生します。

<ul class="list">
 <li class="tab-button"></li>
 <li class="tab-button"></li>
 <li class="tab-button"></li>
</ul>

$(".list").on("click", function (e) {
  if (e.target === document.querySelectorAll(".tab-button")[0]) {
    tabButtonClick(0);
  } else if (e.target === document.querySelectorAll(".tab-button")[1]) {
    tabButtonClick(1);
  } else if (e.target === document.querySelectorAll(".tab-button")[2]) {
    tabButtonClick(2);
  } else if (e.target === document.querySelectorAll(".tab-button")[3]) {
    tabButtonClick(3);
  }
});