我正在创建一个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);
} });```
我用mousemove替换了click监听器,它工作得很好。
document.getElementById("gameBoard").addEventListener("mousemove",function(e) {
if (e.target && e.target.matches("div.cards")) {
console.log("Element id: "+e.target.id);
}});