如何修复鼠标在父div内移过子元素时背景频繁随机变色的问题

问题出在你使用的mouseover事件上——这个事件会触发冒泡机制。当鼠标在父元素内部的子元素（比如img、input、按钮等）之间移动时，子元素的mouseover事件会向上冒泡到父元素，导致父元素的颜色切换函数反复执行，背景色就会持续随机变化。

修复方法很简单，把mouseover替换成mouseenter事件即可。mouseenter不会触发冒泡，只有当鼠标从元素外部首次进入父元素区域时才会触发一次，在父元素内部的子元素之间移动时不会重复触发事件。

修改后的完整代码如下：

<div class="card-border" id="triangleColorChange">
  <img src="images/triangle.png" alt="...">
  <div>
    <h5>Triangle</h5>
    <h6>Area(A)= .5 x b x h </h6>
    <input type="text" placeholder="b" id="triangleB"><span> cm</span>
    <input type="text" placeholder="h" id="triangleH"><span> cm</span>
    <br><br>
    <button id="trianglrBtn">Calculate</button>
  </div>
</div>

<script>
  function getRandomColor() {
    const letters = '0123456789abcdefABCDEF';
    let color = '#';
    for (let i = 0; i < 6; i++) {
      color = color + letters[Math.floor(Math.random() * 22)];
    }
    return color;
  }
  
  // 替换mouseover为mouseenter
  document.getElementById('triangleColorChange').addEventListener('mouseenter', function() {
    const triangleArea = document.getElementById('triangleColorChange');
    triangleArea.style.backgroundColor = getRandomColor();
  })
  
  document.getElementById('triangleColorChange').addEventListener('mouseleave', function() {
    const triangleArea = document.getElementById('triangleColorChange');
    triangleArea.style.backgroundColor = 'white';
  })
</script>

另外可以优化代码里的DOM查询，提前缓存元素避免重复查询，代码会更简洁高效：

// 提前缓存元素
const triangleArea = document.getElementById('triangleColorChange');

triangleArea.addEventListener('mouseenter', function() {
  this.style.backgroundColor = getRandomColor();
})

triangleArea.addEventListener('mouseleave', function() {
  this.style.backgroundColor = 'white';
})

内容的提问来源于stack exchange，提问作者Adiba Mubasshirah