如何限制mousedown事件仅在指定div（square-one）内插入圆形元素

你可以通过以下两种方案实现需求，优先推荐方案1，实现更简单性能更好：

方案1：将点击事件绑定到灰色方块上 #

直接把事件监听器绑到#square-one元素上，只有点击该元素区域才会触发生成圆形的逻辑，自动过滤外部点击。同时调整坐标计算逻辑，避免圆形定位错位、超出方块边界，修改后的完整JS代码如下：

let count = 1
let greySquare = document.getElementById("square-one")
let circlesArray = []
// 提前获取灰色方块的宽高，无需每次点击都重复计算
const squareWidth = greySquare.offsetWidth
const squareHeight = greySquare.offsetHeight

// 事件直接绑定到灰色方块上，外部点击不会触发逻辑
greySquare.addEventListener('mousedown', (event)=>{
  const circleHeight = 40
  const circleWidth = 40
  // offsetX、offsetY是点击位置相对于触发元素（灰色方块）左上角的坐标
  let x = event.offsetX
  let y = event.offsetY

  // 边界判断：保证圆形完全在灰色方块内部，不需要该限制可以删掉这段
  x = Math.max(circleWidth/2, x) // 左边界限制
  x = Math.min(squareWidth - circleWidth/2, x) // 右边界限制
  y = Math.max(circleHeight/2, y) // 上边界限制
  y = Math.min(squareHeight - circleHeight/2, y) // 下边界限制

  const circle = document.createElement('div')
  circle.style.height = `${circleHeight}px`
  circle.style.width = `${circleWidth}px`;
  circle.style.borderRadius = "50%"
  circle.style.backgroundColor = `#F0B27A`
  circle.style.position = "absolute"
  // 父元素为relative定位，left/top是相对于灰色方块左上角的偏移值
  circle.style.left = (x - circleWidth/2) + "px"
  circle.style.top = (y - circleHeight/2) + "px"
  circle.style.lineHeight = `${circleHeight}px`
  circle.style.display = 'flex';
  circle.style.cursor = 'pointer'
  circle.style.justifyContent = 'center';
  circle.style.border = 'none'
  circle.textContent = count++
  greySquare.appendChild(circle)
  circlesArray.push(circle)
})

方案2：在全局点击事件中判断点击区域 #

如果你有特殊需求必须把事件绑定在document上，可以通过getBoundingClientRect()获取灰色方块的视口位置，判断点击坐标是否在方块范围内，符合条件再执行生成逻辑：

let count = 1
let greySquare = document.getElementById("square-one")
let circlesArray = []
const squareWidth = greySquare.offsetWidth
const squareHeight = greySquare.offsetHeight

document.addEventListener('mousedown', (event)=>{
  // 获取灰色方块在视口中的位置信息
  const squareRect = greySquare.getBoundingClientRect()
  const clickX = event.clientX
  const clickY = event.clientY
  // 判断点击位置是否在灰色方块范围内
  const isInSquare = clickX >= squareRect.left 
                    && clickX <= squareRect.right 
                    && clickY >= squareRect.top 
                    && clickY <= squareRect.bottom
  // 不在范围内直接终止逻辑
  if (!isInSquare) return

  // 计算点击位置相对于灰色方块左上角的坐标
  let x = clickX - squareRect.left
  let y = clickY - squareRect.top
  const circleHeight = 40
  const circleWidth = 40

  // 边界判断逻辑和方案1一致
  x = Math.max(circleWidth/2, x)
  x = Math.min(squareWidth - circleWidth/2, x)
  y = Math.max(circleHeight/2, y)
  y = Math.min(squareHeight - circleHeight/2, y)

  const circle = document.createElement('div')
  circle.style.height = `${circleHeight}px`
  circle.style.width = `${circleWidth}px`;
  circle.style.borderRadius = "50%"
  circle.style.backgroundColor = `#F0B27A`
  circle.style.position = "absolute"
  circle.style.left = (x - circleWidth/2) + "px"
  circle.style.top = (y - circleHeight/2) + "px"
  circle.style.lineHeight = `${circleHeight}px`
  circle.style.display = 'flex';
  circle.style.cursor = 'pointer'
  circle.style.justifyContent = 'center';
  circle.style.border = 'none'
  circle.textContent = count++
  greySquare.appendChild(circle)
  circlesArray.push(circle)
})

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