拖拽图片至Div计算总值时出现数值翻倍问题求助

实现拖拽图片至Div中，累加每张图片alt属性的数值，但当前脚本未实现累加效果，反而将数值翻倍。

现有代码 #

<script>
function allowDrop(bet) {
    bet.preventDefault();
}

function drag(bet) {
    bet.dataTransfer.setData("text", bet.target.id);
}

function drop(bet) {
    bet.preventDefault();
    var fetchData = bet.dataTransfer.getData("text");
    bet.target.appendChild(document.getElementById(fetchData).cloneNode(true));

    // 获取所有图片
    let images = document.getElementById("circle").getElementsByTagName('img');

    let sum = 0;
    for (let i = 0; i < images.length; i++) {
        let altValue = parseInt(images[i].alt);
        if (!isNaN(altValue)) {
            sum += altValue;
        }
    }

    document.getElementById('total').value = sum;
}
</script>

<div id="circle"
     ondrop="drop(event)"
     ondragover="allowDrop(event)">
</div>
<br>
<input id="total" type="number" value="0"/>    
<img class="chips" id="a100"
     src="images/Chips/100chip-64.svg"
     alt="100"
     draggable="true"
     ondragstart="drag(event)">
<img class="chips" id="a5"
     src="images/Chips/5chip-64.svg"
     alt="5"
     draggable="true"
     ondragstart="drag(event)">

问题原因 #

核心问题是事件冒泡：当拖拽图片到#circle内已有的图片上时，drop事件会先在子元素（已有图片）触发，随后冒泡到父元素#circle，导致drop函数被执行两次。每次执行都会克隆一张图片并重复累加数值，最终表现为数值翻倍。

修复方案 #

修改drop函数，确保图片始终添加到目标容器，并阻止事件冒泡避免重复执行：

function drop(bet) {
    bet.preventDefault();
    bet.stopPropagation(); // 阻止事件冒泡，避免重复触发

    var fetchData = bet.dataTransfer.getData("text");
    // 直接指定目标容器，不依赖event.target
    const circleContainer = document.getElementById("circle");
    circleContainer.appendChild(document.getElementById(fetchData).cloneNode(true));

    let sum = 0;
    // 遍历容器内所有图片计算总和
    const images = circleContainer.getElementsByTagName('img');
    for (let i = 0; i < images.length; i++) {
        let altValue = parseInt(images[i].alt);
        if (!isNaN(altValue)) {
            sum += altValue;
        }
    }

    document.getElementById('total').value = sum;
}

额外优化建议 #

• 用querySelectorAll替代getElementsByTagName，语法更简洁：

  const images = circleContainer.querySelectorAll('img');
  

• 改用forEach循环提升代码可读性：

  let sum = 0;
  images.forEach(img => {
      const altValue = parseInt(img.alt);
      if (!isNaN(altValue)) sum += altValue;
  });
  

内容的提问来源于stack exchange，提问作者Dan Nick