Question

我试图在javascript中添加多个事件监听器UL。

如果已经点击了我的.preventDefault()元素之一，如何为.card创建条件？

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/en-US/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

})

如何检查元素是否已被点击javascript

3 个答案: