当事件mousedown仅生成为正方形(灰色正方形)时，我试图添加圆圈。如果鼠标停留在正方形1之外，它不应该在其他地方插入任何圆圈，比如正方形2(绿色正方形)。
问题:我如何为圆设置限制，使它们只能插入正方形的边界内?谢谢你的帮助。
***********
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;
}
当我使用你的代码时，圆圈没有放在我实际点击的地方。
这是因为您正在使用鼠标的位置(相对于页面)来检测要放置圆圈的位置，但随后将它们附加到
。graySquare，它不从(0,0)开始。如果你把它们附加到.contaner，你就没事了。
document.querySelector(".container").appendChild(circle)
然后关于设置圆圈的限制，使它们只插入在方形边界内，您需要获得squareOne的位置(x和y)，宽度和高度，只有当点击发生在这些范围内时才继续。
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;
// ...
我用这个来获得div的位置，这个来获得它的宽度和高度(尽管它们最终是相同的解决方案)。
编辑!
我一直在思考这个问题，有一个更明显、更优雅的解决方案(至少对我来说)。您将事件侦听器添加到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>