防止弹出窗口冒泡答案

【问题标题】：Prevent bubbling of the popup防止弹出窗口冒泡
【发布时间】：2021-04-10 04:34:59
【问题描述】：

我不知道如何防止 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;
  };
});

【问题讨论】：

e.stopPropagation()
e.preventDefault(); ----> e.stopPropagation();

标签： javascript

【解决方案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;
  };
});

【讨论】：

嗨，我已经试过了，不幸的是它没有用：S，但我同时找到了解决方案！

【解决方案2】：

所以我设法找到了可行的解决方案。我忘了在描述中提到没有使用 e.preventDefault();工作。 Vlad Lew 为我指明了正确的方向，确认我首先在实施 e.preventDefault() 时没有做错任何事情，而问题出在其他地方。

问题是浏览器在函数执行之前跳转到了当前位置，如空的 href="" 所示。

我只需要添加 ; onclick中函数调用后返回false！

读完这个问题后，我有一个恍然大悟的时刻： When and why to 'return false' in JavaScript?

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}); return false" 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;
  };
});

谢谢大家！

【讨论】：