使用onclick追加div元素的Javascript需要doubleclick

问题描述 投票:0回答:1

我正在创建一个div元素并添加一个onclick来在屏幕上拖动元素。拖动本身按预期工作,但直到我双击元素才能工作。知道为什么我需要双击每个元素才能在屏幕上拖动它/我可以做什么来单击一下拖动元素?

在我从JS内部动态构建它们之前,我不需要双击这些元素。

这是添加onclick的行:

node.onclick = function(){ 
   dragElement(document.getElementById(this.id)); 
}

这是整个功能:

function buildCards(){
    for(let x=0;x<4;x++){
        for(let i=0;i<13;i++){

            var individualCard = new Object();
            individualCard.value = i;

            if(x == 0){
                individualCard.type = 'club';
                individualCard.color = 'black';
            }else if(x == 1){
                individualCard.type = 'spade';
                individualCard.color = 'black';
            }else if(x == 2){
                individualCard.type = 'heart';
                individualCard.color = 'red';
            }else{
                individualCard.type = 'diamond';
                individualCard.color = 'red';
            }

            individualCard.id = individualCard.color+'-'+individualCard.value+'-'+individualCard.type;

            deckOfCards.push(individualCard);

            let node = document.createElement('div');
            node.className = 'cards';
            node.setAttribute("id", individualCard.id);
            node.onclick = function(){ 
                dragElement(document.getElementById(this.id)); 
            }
            node.style.background = 'url("cards/cards.png") '+-(i*72)+'px '+-(x*96)+'px';
            document.getElementById('gameBoard').appendChild(node);
        }
    }
}

根据Goldie的评论,我将onclick事件调整为事件监听器。

document.getElementById("gameBoard").addEventListener("click",function(e) { 
if (e.target && e.target.matches("div.cards")) { 
      console.log("Anchor element clicked! "+e.target.id);
} });```
javascript html onclick draggable
1个回答
0
投票

我用mousemove替换了click监听器,它工作得很好。

document.getElementById("gameBoard").addEventListener("mousemove",function(e) { 
    if (e.target && e.target.matches("div.cards")) { 
          console.log("Element id: "+e.target.id); 
    }});
© www.soinside.com 2019 - 2024. All rights reserved.