如何檢查一個元素是否與另一個元素處於相同位置javascript

我正在創建一種很酷的事物，基本上它只是繪製而不使用畫布，因爲我認爲「我到底會玩什麼，周圍有一些JS「。現在我的電腦可以處理大約4,000個不同的元素，然後變成laggy，如果我能確定是否在我創建的新div下有div，然後將其刪除，我可以將該數字設置得更大。如何檢查一個元素是否與另一個元素處於相同位置javascript

如何檢測腳本是否已經創建了一個新元素，並在不使用外部庫的情況下刪除現有元素？

<!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>

http://jsbin.com/hocowa/edit?html,output

來源

2015-06-23 AlgoRythm

您實際上並未使用畫布，只是將元素附加到DOM。使用畫布時，您可以繪製多少個圓圈並不限制。 – Blender

我知道，這就是我所說的。但是在DOM中有4k個元素，它會有些滯後。這就是我的問題...... – AlgoRythm

是的，但他所說的是你應該絕對使用帆布。 –

你可以使用document.elementFromPoint(x, y);

不要以爲你能在一個單一的點來處理多個元素雖然。可能需要迭代，但有一個元素可以刪除或忽略。

來源

2015-06-23 00:50:21 sambomartin

好的，我更新了我的JS Bin，但我似乎無法使其工作。你可以看一看，看看有什麼不對嗎？ – AlgoRythm

假設這是JS鼓搗的實驗......你可以做到這一點

你在哪裏繪製每個新的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; 
     }

基本上，您繪製的最後一個曲目決定繪製一個新的圓或不是，根據到最後繪製的圓的距離。您可以使用閾值變量，閾值條件ìf (ty || tx)來調整「決定」，或者甚至可以計算矢量大小（每個圓的中心的半徑）以保持幾何圖形的正確性：radius = sqrt((newY - oldY)^2 + (newX - oldX)^2)。

當然，這隻能按順序跟蹤圖紙，而不是先前的迭代。爲此，您需要在每個繪製週期進行碰撞檢查，這意味着迭代所有繪製的div並將其位置與新圓的位置進行比較。這是非常低效的。如果您在避免查詢DOM的索引中追蹤繪製的圓圈，則可以加速一些事情，只有內存。

var drawnCircles = []; 

for (var i in drawnCircles){ 
    if (Math.abs(drawnCircles[i].top - e.clientY) < yThreshold && //same for x){ 
     // draw your new circle 
     var newCircle = document.createElement("div"); 
       newCircle.className = "circle"; 
       newCircle.style.top = e.clientY - 25 + 'px'; 
       newCircle.style.left = e.clientX - 25 + 'px'; 
     // and keep track of it 
     drawnCircles.push({top: e.clientY, left: e.clientX}); 
    } 
}

來源

2015-06-23 00:58:39 Juank

如此複雜的東西會效率低下。 – AlgoRythm

複雜並不總是意味着效率低下，但是，你用div來做什麼是非常低效的。有沒有什麼神奇的方式 – Juank

document.elementFromPoint（）似乎很酷壽。我做了一個小提琴機智，但它似乎並不喜歡工作。 jsbin.com/hocowa/edit?html,output – AlgoRythm

如果你想之前，以確保與元素相同位置上沒有新的元素，你可以創建Array持有抽取的位置，繪製只有在新位置不數組中存在的新元素。示例：

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); 
      } 
     } 
    } 

}

來源

2015-06-23 00:59:41

我認爲這樣的效率會很低。 – AlgoRythm

通過一個具有4000多個項目的1維數組只會增加滯後。也許有更合適的數據結構？ – m69

最好的選擇是做JavaScript中的所有邏輯並使用數組進行跟蹤。僅將DOM用於顯示目的，您應該看到改進。

來源

2015-06-23 02:19:20

如何檢查一個元素是否與另一個元素處於相同位置javascript

回答

相關問題