如何检查一个元素是否与另一个javascript处于相同的位置
我正在创造一种很酷的东西，基本上，它只是在不使用画布的情况下画画，因为我想“见鬼，我会玩一些JS”。现在我的电脑可以处理大约4000个不同的元素，然后变大。如果我能判断我正在创建的新div下是否有div，然后将其删除，我就可以使这个数字变大 如何在不使用外部库的情况下检测脚本将要创建新元素的元素是否已经存在并删除现有元素如何检查一个元素是否与另一个javascript处于相同的位置,javascript,html,css,Javascript,Html,Css,我正在创造一种很酷的东西，基本上，它只是在不使用画布的情况下画画，因为我想“见鬼，我会玩一些JS”。现在我的电脑可以处理大约4000个不同的元素，然后变大。如果我能判断我正在创建的新div下是否有div，然后将其删除，我就可以使这个数字变大 如何在不使用外部库的情况下检测脚本将要创建新元素的元素是否已经存在并删除现有元素 <!DOCTYPE html> <html> <head> <title>Drawing thing</title
<!DOCTYPE html>
<html>
<head>
<title>Drawing thing</title>
</head>
<body onmousedown="setYes()" onmouseup="setNo()">
<div id="appendThingsHere"></div>
<style>
.circle{
height:50px;
width:50px;
background:blue;
border-radius:50%;
position:absolute;
-moz-user-select:none;
-webkit-user-select:none;
user-select:none;
}
body{
overflow:hidden;
}
#appendThingsHere{
height:100%;
width:100%;
background:none;
position:absolute;
top:0;
left:0;
}
</style>
<script>
var mouseDown = "no";
var elements = 0;
function setYes(){
mouseDown = "yes";
}
function setNo(){
mouseDown = "no";
}
document.body.onmousemove = function(e){
if(mouseDown === "yes"){
if(elements < 4000){
var newCircle = document.createElement("div");
newCircle.className = "circle";
newCircle.style.top = e.clientY - 25 + 'px';
newCircle.style.left = e.clientX - 25 + 'px';
try{
var elem = document.elementFromPoint(e.clientX - 25 + 'px', e.clientY - 25 + 'px');
elem.parentElement.removeChild(elem);
elements = elements - 1;
alert("Got one!");
}
catch(err){
}
elements ++;
document.getElementById('appendThingsHere').appendChild(newCircle);
}
}
}
</script>
</body>
</html>
画画的东西
.圆圈{
高度：50px；
宽度：50px；
背景：蓝色；
边界半径：50%；
位置：绝对位置；
-moz用户选择：无；
-webkit用户选择：无；
用户选择：无；
}
身体{
溢出：隐藏；
}
#附属物{
身高：100%；
宽度：100%；
背景：无；
位置：绝对位置；
排名：0；
左：0；
}
var mouseDown=“否”；
var元素=0；
函数setYes（）{
mouseDown=“是”；
}
函数setNo（）{
mouseDown=“否”；
}
document.body.onmousemove=函数（e）{
如果（鼠标向下==“是”）{
if（元件<4000）{
var newCircle=document.createElement（“div”）；
newCircle.className=“circle”；
newCircle.style.top=e.clientY-25+'px'；
newCircle.style.left=e.clientX-25+'px'；
试一试{
var elem=document.elementFromPoint（e.clientX-25+'px'，e.clientY-25+'px'）；
elem.parentElement.removeChild（elem）；
元素=元素-1；
警惕（“得到一个！”）；
}
捕捉（错误）{
}
元素++；
document.getElementById（'appendThingsHere'）.appendChild（newCircle）；
}
}
}
您可以使用
document.elementFromPoint（x，y）
但不要认为你能在一个点上处理多个元素。当有一个元素要删除或忽略时，可能必须进行迭代。假设这是一个修补js的实验。。。你可以这样做
在绘制每个新div的处理程序上，跟踪最后绘制的div
var previousCircle,
yThreshold = 10,
xThreshold = 10;
document.body.onmousemove = function(e){
if(mouseDown === "yes"){
if(elements < 4000){
var ty = Math.abs(parseInt(previousCircle.style.top, 10) - e.clientY) < yThreshold;
var tx = Math.abs(parseInt(previousCircle.style.left, 10) - e.clientX) < xThreshold;
if (ty && tx){
// if thresholds pass (new is far away enough from old) then draw a new one
var newCircle = document.createElement("div");
newCircle.className = "circle";
newCircle.style.top = e.clientY - 25 + 'px';
newCircle.style.left = e.clientX - 25 + 'px';
previousCircle = newCircle;
}
如果要确保没有新元素与之前的元素具有相同的位置，则可以创建数组
以保留绘制的位置，并仅在数组中不存在新位置时绘制新元素。例如：
var mouseDown = "no";
var elements = 0;
var elmList = [];
function setYes() {
mouseDown = "yes";
}
function setNo() {
mouseDown = "no";
}
document.body.onmousemove = function (e) {
if ( mouseDown === "yes" ) {
if ( elements < 4000 ) {
var offset = (e.clientY - 25) + 'x' + (e.clientX - 25);
if ( elmList.indexOf(offset) < 0 ) {
var newCircle = document.createElement("div");
newCircle.className = "circle";
newCircle.style.top = e.clientY - 25 + 'px';
newCircle.style.left = e.clientX - 25 + 'px';
elements++;
elmList.push(offset);
document.getElementById('appendThingsHere').appendChild(newCircle);
}
}
}
}
var mouseDown=“否”；
var元素=0；
var-elmList=[]；
函数setYes（）{
mouseDown=“是”；
}
函数setNo（）{
mouseDown=“否”；
}
document.body.onmousemove=函数（e）{
如果（鼠标向下==“是”）{
if（元件<4000）{
var偏移=（e.clientY-25）+'x'+（e.clientX-25）；
if（elmList.indexOf（offset）<0）{
var newCircle=document.createElement（“div”）；
newCircle.className=“circle”；
newCircle.style.top=e.clientY-25+'px'；
newCircle.style.left=e.clientX-25+'px'；
元素++；
elmList.push（偏移）；
document.getElementById（'appendThingsHere'）.appendChild（newCircle）；
}
}
}
}
最好的选择是在JavaScript中执行所有逻辑并使用数组进行跟踪。仅将DOM用于显示目的，您应该会看到一个改进。您实际上并没有使用画布，只是将元素附加到DOM中。有了画布，你可以画多少圈是没有限制的。我知道，这就是我说的。但由于DOM中有4k元素，它变得有点滞后。这是我的问题…是的，但他说的是，你绝对应该使用画布。你可以浏览每个元素的列表，检查它是否与你要绘制的新元素具有相同的位置，但这会让你更慢，而且并不完美：一个区域可能会被相邻元素完全着色，即使没有一个元素具有完全相同的位置。另一个选择是看你要着色的每个像素，如果所有像素都已经着色，不要画新元素；然而，我不知道如何在页面中找到像素的颜色，除非它是画布或图像的一部分。也许我们看错了-也许只有在它下面没有圆的情况下才能创建一个圆？也许这会更容易…好吧，我更新了我的JS垃圾桶，但我似乎无法让它工作。你能不能看一下，看看出了什么问题？我认为这样做是没有效率的。查看包含4000多个项目的一维数组只会增加延迟。也许有一个更合适的数据结构？如此复杂的事情将是低效的。复杂并不总是意味着低效，然而，你试图用div做的事情是非常低效的。没有什么神奇的方法可以绕过它Document.elementFromPoint（）看起来很酷。我对它胡说八道，但它似乎不起作用。jsbin.com/hocowa/edit？html，输出
var mouseDown = "no";
var elements = 0;
var elmList = [];
function setYes() {
mouseDown = "yes";
}
function setNo() {
mouseDown = "no";
}
document.body.onmousemove = function (e) {
if ( mouseDown === "yes" ) {
if ( elements < 4000 ) {
var offset = (e.clientY - 25) + 'x' + (e.clientX - 25);
if ( elmList.indexOf(offset) < 0 ) {
var newCircle = document.createElement("div");
newCircle.className = "circle";
newCircle.style.top = e.clientY - 25 + 'px';
newCircle.style.left = e.clientX - 25 + 'px';
elements++;
elmList.push(offset);
document.getElementById('appendThingsHere').appendChild(newCircle);
}
}
}
}