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

Question

请先点击input，点击不同的li，然后查看console。

<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>

jS

Please see JSfiddle link

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

Answer 1

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

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>