Javascript добавление элемента div с помощью onclick требует двойного щелчка - PullRequest
Новая
       17

Javascript добавление элемента div с помощью onclick требует двойного щелчка

0 голосов
/ 22 апреля 2019

Я создаю элемент div и добавляю onclick для перемещения элемента по экрану. Само перетаскивание работает, как и ожидалось, но оно не работает, пока я дважды не нажму на элемент. Любая идея, почему мне нужно дважды щелкнуть каждый элемент, прежде чем я могу перетащить их по экрану / Что я могу сделать, чтобы перетащить элемент одним щелчком мыши?

Мне не нужно было дважды щелкать по этим элементам, пока после Я не начал динамически создавать их изнутри JS.

Вот строка добавления клика: 

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);
        }
    }
}

Согласно комментарию Голди, я настроил событие onclick для прослушивателя событий. 

document.getElementById("gameBoard").addEventListener("click",function(e) { 
if (e.target && e.target.matches("div.cards")) { 
      console.log("Anchor element clicked! "+e.target.id);
} });```

1 Ответ

0 голосов
/ 26 апреля 2019

Я заменил прослушиватель щелчков мышью, и он работает просто отлично. 

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