仅将 Mousedown 上的元素附加到特定 Div 元素中

Question

我试图在事件 mousedown 仅生成到方块一（灰色方块）时添加圆圈。如果鼠标悬停在方块一之外，则不应在其他任何地方插入任何圆圈，例如方块二（绿色方块）。

问题：如何设置圆的界限，使它们只插入到方块边界内？感谢您的帮助。

***********
JavaScript
***********

let count = 1
let greySquare = document.getElementById("square-one")
let mousePosition;
let circlesArray = []

document.addEventListener('mousedown', (event)=>{

  let circle = document.createElement('div')
  let circleHeight = 40
  let circleWidth = 40

  mousePosition = {
    x: event.clientX,
    y: event.clientY
  }


  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 = (mousePosition.x - (circleWidth/2)) + "px"
  circle.style.top = (mousePosition.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)

})

********
  HTML
********

  <body>
      <div class="container">
        <div id="square-one"></div>
        <div id="square-two"></div>
      </div>
    <script src="script.js"></script>
  </body>

******
CSS
******
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  position: relative;
}

.container{
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#square-one{
  position: relative;
  width: 300px;
  height: 300px;
  background-color: grey;
  margin-right: 100px;
}
#square-two{
  position: relative;
  width: 300px;
  height: 300px;
  background-color: green;
}

Answer 1

当我使用你的代码时，圆圈并没有放在我实际点击的地方。

那是因为您使用鼠标的位置（相对于页面）检测您将放置圆圈的位置，然后将它们附加到

graySquare，不是从 (0,0) 开始的。如果您将它们附加到 .contaner，就可以了。

document.querySelector(".container").appendChild(circle)

然后关于设置圆圈的限制，使它们只插入到方形边界内，你需要得到位置（x和y），宽度和 squareOne 的高度，仅当点击发生在这些范围内时才继续。

document.addEventListener('mousedown', (event)=>{

  mousePosition = {
    x: event.clientX,
    y: event.clientY
  }

  let greySquarePosition = greySquare.getBoundingClientRect();

  if(!(mousePosition.x>=greySquarePosition.left + window.scrollX&&
    mousePosition.x<=greySquarePosition.left + window.scrollX + greySquarePosition.width&&
    mousePosition.y>=greySquarePosition.top + window.scrollY&&
    mousePosition.y<=greySquarePosition.top + window.scrollY + greySquarePosition.height)) 
    return;
    // ...

我使用 this to get the position of the div, and this 来获取它的宽度和高度（尽管它们最终是相同的 解决方案）。

编辑！

我一直在思考这个问题，并且有一个更明显、更优雅的解决方案（至少对我而言）。您将事件侦听器添加到 graySquare 而不是整个 document.

greySquare.addEventListener('mousedown', (event)=> ...

那么你就不需要检查鼠标是否在限制范围内的丑陋部分了。

您甚至可以将相同的功能绑定到不同的方块。检查更新后的代码段。

let count = 1
let greySquare = document.getElementById("square-one")
let greenSquare = document.getElementById("square-two")
let mousePosition;
let circlesArray = []

greySquare.addEventListener('mousedown', paintCircles.bind(null, '#F0B27A'), false);
greenSquare.addEventListener('mousedown', paintCircles.bind(null, '#fa0123'), false);

function paintCircles(color, event){

    mousePosition = {
      x: event.clientX,
      y: event.clientY
    }

    let circle = document.createElement('div')
    let circleHeight = 40
    let circleWidth = 40

    circle.style.height = `${circleHeight}px`
    circle.style.width = `${circleWidth}px`;
    circle.style.borderRadius = "50%"

    circle.style.backgroundColor = `${color}`
    circle.style.position = "absolute"
    circle.style.left = (mousePosition.x - (circleWidth/2)) + "px"
    circle.style.top = (mousePosition.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++;
    document.querySelector(".container").appendChild(circle)
    circlesArray.push(circle)

}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body{
    position: relative;
  }

  .container{
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #square-one{
    position: relative;
    width: 300px;
    height: 300px;
    background-color: grey;
    margin-right: 100px;
  }
  #square-two{
    position: relative;
    width: 300px;
    height: 300px;
    background-color: green;
  }

<body>
  <div class="container">
    <div id="square-one"></div>
    <div id="square-two"></div>
  </div>
</body>

仅将 Mousedown 上的元素附加到特定 Div 元素中

Appending an Element on Mousedown Into Specific Div Element Only

javascript

html

mouseevent

mousedown

onmousedown