Question

我正在创建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);
} });```

Answer 1

我用mousemove替换了点击侦听器，并且效果很好。

document.getElementById("gameBoard").addEventListener("mousemove",function(e) { 
    if (e.target && e.target.matches("div.cards")) { 
          console.log("Element id: "+e.target.id); 
    }});

Javascript将div元素附加到onclick要求doubleclick

1 个答案: