当 div 重叠时事件停止传播不适用

Question

当我为两个蒙版上传图像并且当我拖动下图的 B 部分时，比 C 部分和 D 部分也拖动，但它不应该发生......因为部分 AB 在一个 div 中，第 CD 在另一个 DIV 中，或者我在 event stoppropogation 上做错了什么？

video link

https://codepen.io/kidsdial/pen/OdwWQo

fileupa.onchange = e => {
 target_imga.src = URL.createObjectURL(fileupa.files[0]);   
}

fileupb.onchange = e => {
 target_imgb.src = URL.createObjectURL(fileupb.files[0]);   
}

let prevX = 0, prevY = 0,translateX = 0, translateY = 0, scale = 1, zoomFactor = 0.1;

function onDragStart(evt) {
  if (evt.dataTransfer && evt.dataTransfer.setDragImage) {
evt.dataTransfer.setDragImage(evt.target.nextElementSibling, 0, 0);
  }
  prevX = evt.clientX;
  prevY = evt.clientY;
}

function onDragOver(evt) {
  translateX += evt.clientX - prevX;
  translateY += evt.clientY - prevY;
  prevX = evt.clientX;
  prevY = evt.clientY;
  updateStyle();
  
}

function updateStyle() 
{ 
let transform = "translate(" +translateX+ "px, "+ translateY + "px) scale("+scale+")"; 

if(document.querySelector('#uploadedImg img'))
document.querySelector('#uploadedImg img').style.transform = transform;

  if (document.getElementById("check").checked) {
    event.stopPropagation();
  }

}

function onDragOverSec(evt) {
  translateX += evt.clientX - prevX;
  translateY += evt.clientY - prevY;
  prevX = evt.clientX;
  prevY = evt.clientY;
  updateStyleSec();
}

function updateStyleSec() 
{ 
let transform = "translate(" +translateX+ "px, "+ translateY + "px) scale("+scale+")"; 

if(document.querySelector('#uploadedImg2 img'))
document.querySelector('#uploadedImg2 img').style.transform = transform;
}

.container {
    border: 1px solid #DDDDDD;
    width: 612px;
    height: 612px;
    position:relative;
 background:silver;
}

.customa {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer; 
  position: relative;
    top: 350px;
    z-index: 1;
    left: -40px;
}

.customb {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer; 
  position: relative;
    top: 350px;
    z-index: 1;
    left: 80px;
}

.masked-imga

{
  
  -webkit-mask-image: url(https://i.stack.imgur.com/VNwNC.png);
  mask-image: url(https://i.stack.imgur.com/VNwNC.png);
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;  
  
  width: 259px;
  height: 278px;
  position: absolute;
 top: 221px;
 left: 23px; 
}


.masked-imgb 
{
  -webkit-mask-image: url(https://i.stack.imgur.com/bdJSg.png);
  mask-image: url(https://i.stack.imgur.com/bdJSg.png);
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;  
  
    width: 416px;
    height: 388px;
  
    position: absolute;
 top: 111px;
 left: 173px; 
}

.minaimga
{
  display: block;
  background-color: white;
  height: 278px;
}

.minaimgb 
{
  display: block;
  background-color: white;
  height: 388px;
}

<div class="container">

Stop propagation:
<input type="checkbox" id="check">


<label for="fileupa" class="customa">
    Upload Image
  </label>
  <input id="fileupa"  type="file" style="display:none;">
  
  
  <label for="fileupb" class="customb">
     Upload Image
  </label>
  <input id="fileupb"  type="file" style="display:none;">

<div class="minaimg masked-imga"   ondragover="onDragOver(event)"ondragover="onDragOver(event)" >
  <div draggable="true" ondragstart="onDragStart(event)" id="uploadedImg">
    <div class="minaimga">
     
      <img id="target_imga"  alt="">

      <div></div>

    </div>
  </div>
</div>

<div class="minaimg masked-imgb"   ondragover="onDragOverSec(event)"ondragover="onDragOver(event)" >
  <div draggable="true" ondragstart="onDragStart(event)" id="uploadedImg2">
    <div class="minaimgb">
    
      <img id="target_imgb"  alt="">

      <div></div>

    </div>
  </div>
</div>

</div>

如果您需要有关此问题的任何其他信息，请告诉我......

请帮我找到解决办法.....

提前致谢....

Answer 1

首先，不用为 onDragOver 和 updateStyle 使用两个处理程序，您可以使用相同的处理程序并将正在拖动的节点存储在变量中。

let prevX = 0,
    prevY = 0,
    translateX = 0,
    translateY = 0,
    scale = 1,
    zoomFactor = 0.1,
    draggedElement = null;

function onDragStart(evt) {
  if (evt.dataTransfer && evt.dataTransfer.setDragImage) {
    evt.dataTransfer.setDragImage(evt.target.nextElementSibling, 0, 0);
  }
  prevX = evt.clientX;
  prevY = evt.clientY;
  draggedElement = evt.target;
}
function onDragEnd() {
  draggedElement = null;
}

function onDragOver(evt) {
  translateX += evt.clientX - prevX;
  translateY += evt.clientY - prevY;
  prevX = evt.clientX;
  prevY = evt.clientY;
  updateStyle();
}

function updateStyle() {
  if (!draggedElement) return;
  let transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`;

  draggedElement.style.transform = transform;
}

这也应该防止同时拖动两者。

如果你能为每个形状创建一个 clip-path 并使用它就更好了。

查看粗略的近似值（用 clippy) at https://codepen.io/anon/pen/gqjWVG 制作，但您可以使用 SVG 文件作为剪辑路径并完全跳过遮罩。

当 div 重叠时事件停止传播不适用

event stop propogation is not applying when divs are overlapped

javascript

event-propagation