javascript - 防止弹出窗口冒泡

Question

我不确定如何防止 js 弹出窗口冒泡。我制作了一个带有 onClick 事件的标签按钮，该按钮导致删除图像的删除功能。当我单击按钮时，弹出窗口关闭得非常快，删除功能通常不会执行到最后。

let image_popup = document.querySelector('.image-popup');

document.querySelectorAll('.images a').forEach(img_link => {
  img_link.onclick = e => {
      e.preventDefault();
      
      let img_meta = img_link.querySelector('img');
      let img = new Image();
      img.onload = () => {

          image_popup.innerHTML = `
          
              <div class="con responsive3">
                  <h3>${img_meta.dataset.title}</h3>
                  <p>${img_meta.alt}   autor: ${img_meta.dataset.alt2}</p>
                  
                  <img src="${img.src}" class="responsive2" width="${img.width}" height="${img.height}">
                  
                  <a href="" onClick="brisanje_slike(${img_meta.dataset.id})" class="trash" title="Obriši sliku"><i class="fa fa-trash fa-xs"></i></a>
              </div>
              
          `;
          image_popup.style.display = 'flex';
      };
      img.src = img_meta.src;
  };
});

标签： javascript

Answer 1

尝试stopPropagation()：

let image_popup = document.querySelector('.image-popup');

document.querySelectorAll('.images a').forEach(img_link => {
  img_link.onclick = e => {
      e.preventDefault();
      e.stopPropagation();
      
      let img_meta = img_link.querySelector('img');
      let img = new Image();
      img.onload = () => {

          image_popup.innerHTML = `
          
              <div class="con responsive3">
                  <h3>${img_meta.dataset.title}</h3>
                  <p>${img_meta.alt}   autor: ${img_meta.dataset.alt2}</p>
                  
                  <img src="${img.src}" class="responsive2" width="${img.width}" height="${img.height}">
                  
                  <a href="" onClick="brisanje_slike(${img_meta.dataset.id})" class="trash" title="Obriši sliku"><i class="fa fa-trash fa-xs"></i></a>
              </div>
              
          `;
          image_popup.style.display = 'flex';
      };
      img.src = img_meta.src;
  };
});