當我制作 function 時，每次點擊里面點擊 function 然后點擊每次循環運行。 如何防止循環點擊

Question

請先點擊輸入，然后點擊不同的 li 和查看控制台。

<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

您可以嘗試使用名為 function 作為事件處理程序 function，如下所示。

 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>