javascript - 当我创建一个函数时，每个li单击内部click函数，然后每次都在循环中运行li click。如何防止循环点击

请首先单击输入，然后单击不同的li和see控制台。

<h1>
Please first click on input and click on different diffrent li and the see console.
</h1>
<div class="select_option"  id="select1">
      <input
        type="text"
        name=""
        placeholder="Select here..."
      />
      <ul>
        <li>Level 1</li>
        <li>Level 2</li>
        <li>Level 3</li>
        <li>Level 4</li>
        <li>Level 5</li>
        <li>Level 6</li>
        <li>Level 7</li>
      </ul>
    </div>

  S

Please see JSfiddle link

https://jsfiddle.net/wq8La65n/2/

最佳答案

您可以使用命名函数作为事件处理函数，如下所示。

document.querySelector('#select1').onclick = function(e){
  var ul_li = document.querySelectorAll("#select1 ul li");
  ul_li.forEach(function(li_click) {
    li_click.addEventListener("click", clickHandler);
  });
}
function clickHandler(e){
  console.log(e.target.textContent);
}

<h1>
Please first click on input and click on different diffrent li and the see console.
</h1>
<div class="select_option" id="select1">
  <input
    type="text"
    name=""

    placeholder="Select here..."
  />
  <ul>
    <li>Level 1</li>
    <li>Level 2</li>
    <li>Level 3</li>
    <li>Level 4</li>
    <li>Level 5</li>
    <li>Level 6</li>
    <li>Level 7</li>
  </ul>
</div>

关于javascript - 当我创建一个函数时，每个li单击内部click函数，然后每次都在循环中运行li click。如何防止循环点击，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58764890/