Question

我有一个带有16个li元素子元素的ul列表。

我用js创建HTML元素。我在ul元素上添加了Eventlistener（clickevent）。 ->事件冒泡

现在，当元素被单击时，我想删除Eventlistener，因此无法再次单击该元素。

如何从父ul的子li中删除事件监听器。但是只为这个现在被点击的孩子？所以我仍然可以单击其他15 li元素？

我正试图找到解决方法，但我需要帮助。

<ul class="stars">
   <li><i class="fa fa-star"></i></li>
   <li><i class="fa fa-star"></i></li>
   <li><i class="fa fa-star"></i></li>
</ul>

我选择ul并添加nen eventListener

´´´
ulDeck = document.querySelector(".stars");
ulDeck.addEventListener('click', showStar, false);
´´´

然后我创建li元素

´´´

for (let i = 0; i < cards.length; i++) {
    // Create new li elm
    let li = document.createElement("li");

´´´

Answer 1

您可以执行以下操作：

const nodeList = document.getElementsByClassName('stars')[0].getElementsByTagName('li')

for (let idx = 0; idx < nodeList.length; idx++) {
  const item = nodeList[idx]
  const itemListener = function(e) {
    console.log('CLICK!')
    item.removeEventListener('click', itemListener)  
  }
  item.addEventListener('click', itemListener)
}

<ul class="stars">
   <li><i class="fa fa-star"></i></li>
   <li><i class="fa fa-star"></i></li>
   <li><i class="fa fa-star"></i></li>
</ul>

Answer 2

您应该将click事件处理程序绑定到 ul 子级，并实现一些类似的javascript：

def printit():
    threading.Timer(30, printit).start()
    global stuck_counter
    global check_stuck

    pos = pyautogui.position()
    stuck_counter += 1

    if stuck_counter %2 == 0:
      pos_x_one = pos.x
    else:
      pos_x_two = pos.x

    print(pos_x_one, pos_x_two) 

    if pos_x_one == pos_x_two:
      check_stuck += 1
      if check_stuck == 10:
        print("STUCK!")
        check_stuck = 0
        restarting()
    else:
      check_stuck = 0

如果被点击的 ul 子代已经分配了一个“ clicked ”类，此代码段将阻止执行您的代码。

如何从事件冒泡子中删除事件侦听器

2 个答案: