已关闭。此问题需要details or clarity。目前不接受回答。
**要改进此问题吗？**通过editing this post添加详细信息并阐明问题。

2天前关闭。
Improve this question的
嗨，我想检查与Java脚本DIV和IMG标签之间的冲突。我有DIV的ID名称是MainDiv。在这个div有太多的IMG标签的位置绝对和不同的宽度和高度。（所以你可以看到他们在任何位置的MainDiv）也有div与id名称选择。该方案是当用户开始绘制矩形（选择）通过在mainDiv中左键单击，如果选择在mainDiv中的IMG标签上发生冲突，则选择背景颜色变为红色，如果不是，则保持绿色。释放后左键单击，如果选择颜色为红色，则向用户显示错误。
我现在写这个JavaScript：

const MainDiv = document.getElementById('MainDiv');
 const selection = document.getElementById('selection');
 const dimensionsInfo = document.getElementById('dimensionsInfo');
 let startX, startY, startOffsetX, startOffsetY;
 let width,height;
 
     MainDiv.addEventListener('mousedown', startDrawing);
     MainDiv.addEventListener('mousemove', drawRectangle);
     MainDiv.addEventListener('mouseup', stopDrawing);
 

 function startDrawing(event) {

     if (getComputedStyle(event.target).cursor === 'pointer') {
         return;
     }

     startX = event.clientX;
     startY = event.clientY;
     startOffsetX = event.offsetX;
     startOffsetY = event.offsetY;

     selection.style.display = 'block';
     dimensionsInfo.style.display = 'block';
 }

 function drawRectangle(event) {
     if (startX && startY) {

         const MainDivOffsetX = MainDiv.getBoundingClientRect().left;
         const MainDivEndDrawX = MainDiv.offsetWidth + MainDivOffsetX;

         const MainDivOffsetY = MainDiv.getBoundingClientRect().top;
         const MainDivEndDrawY = MainDiv.offsetHeight + MainDivOffsetY;

         if (event.clientX >= MainDivOffsetX && event.clientX <= MainDivEndDrawX) {
             width = (event.clientX - startX); 
         }

         if (event.clientY >= MainDivOffsetY && event.clientY <= MainDivEndDrawY) {
             height = (event.clientY - startY);
         }

        
         const area = Math.abs(width * height);
         const sum = Math.abs(area * 100).toLocaleString();

         selection.style.width = Math.abs(width) + 'px';
         selection.style.height = Math.abs(height) + 'px';
         selection.style.left = width < 0 ? event.clientX + 'px' : startX + 'px';
         selection.style.top = height < 0 ? event.clientY + 'px' : startY + 'px';

         const startAdsX = startX < event.clientX ? startOffsetX : startOffsetX - Math.abs(width);
         const startAdsY = startY < event.clientY ? startOffsetY : startOffsetY - Math.abs(height);

         dimensionsInfo.style.left = event.clientX + 'px';
         dimensionsInfo.style.top = event.clientY + 'px';


         const targetElement = document.elementsFromPoint(event.clientX, event.clientY);
         let intersectsWithImage = false;

         for (let i = 0; i < targetElement.length; i++) {
             if (targetElement[i].tagName === 'IMG') {
                 intersectsWithImage = true;
             }
         }
         if (intersectsWithImage === true) {
             selection.style.backgroundColor = 'rgba(255, 127, 127, 0.3)';

         }
         else{
             selection.style.backgroundColor = 'rgba(144, 238, 144, 0.3)';
        

         }
         
         
     }
 }

字符串
在这段代码中，我使用document.elementsFromPoint来检查光标是否在图像标签中，但这样的话，颜色只会在光标在IMG中时变成红色，如果光标在IMG之外，但发生了碰撞，颜色仍然是绿色。
我也不想使用queryselectorsall，因为我有太多的IMGtag在mainDiv，如果我使用它，是采取非常处理器的权力和系统越来越滞后。

let targetElement;
   for (let x = startAdsX; x <= startAdsX + width; x++) {
       for (let y = startAdsY; y <= startAdsY + height; y++) {
           targetElement = document.elementsFromPoint(x, y);
           for (let i = 0; i < targetElement.length; i++) {
               if (targetElement[i].tagName === 'img') {
               intersectsWithImage = true;
                 }
             }
}
}

型
在上面的代码中，我得到了选择区域的所有点，并与IMG标签进行了冲突比较。但是这样做的过程太多，系统变得滞后。那么如何解决这个问题？如何检查用户绘制的选择区域是否与IMG标签发生冲突？