如何檢查元素是否已被單擊javascript

Question

我正在嘗試在JavaScript中添加多個事件監聽器UL 。

如果我的.card元素之一已被單擊，如何為.preventDefault()創建條件？

const cd = document.getElementById('listDeck')
cd.addEventListener('click', flipFirst, false)


function flipFirst(e) {
  if (e.target && e.target.nodeName == "LI") {
    var firstMove = document.getElementById(e.target.id)
    firstMove.classList.add('open', 'show')
    console.log('first card was clicked')
    e.currentTarget.removeEventListener('click', flipFirst);
  }
}

cd.addEventListener('click', function(evt) {
  if () {
    //condition is true
    //then prevent default
  }   
    var secondMove = document.getElementById(evt.target.id)
    secondMove.classList.add('open', 'show')
    console.log('second card was clicked')
})

Answer 1

快速解決方案是在evt.currentTarget上設置一個屬性，該屬性引用處理程序所在的dom節點。

https://developer.mozilla.org/zh-CN/docs/Web/API/Event/currentTarget

Answer 2

一種簡單的方法是將一個類設置為所單擊的li。

function flipFirst(e) {
  if (e.target && e.target.nodeName == "LI") {
    var firstMove = document.getElementById(e.target.id)
    firstMove.classList.add('open', 'show', 'wasClicked') // Add class if clicked
    console.log('first card was clicked')
    e.currentTarget.removeEventListener('click', flipFirst);
  }
}

cd.addEventListener('click', function(evt) {
  if (evt.srcElement.classList.contains('wasClicked') == true) { // check if it has the class
    //then prevent default
  }   
    var secondMove = document.getElementById(evt.target.id)
    secondMove.classList.add('open', 'show')
    console.log('second card was clicked')
})

Answer 3

或在JavaScript中設置布爾變量

const cd = document.getElementById('listDeck')
cd.addEventListener('click', flipFirst, false)
var isBtnClicked = false; // <-- Here is variable declared.

function flipFirst(e) {
    if (e.target && e.target.nodeName == "LI") {
        var firstMove = document.getElementById(e.target.id)
        firstMove.classList.add('open', 'show')
        console.log('first card was clicked')
        e.currentTarget.removeEventListener('click', flipFirst);
    }
}

cd.addEventListener('click', function(evt) {
    if () {
        //condition is true
        //then prevent default
    }   

     var secondMove = document.getElementById(evt.target.id)
     secondMove.classList.add('open', 'show')
     console.log('second card was clicked')
     isBtnClicked = true; // <--- Here is the variable

})