Prevent bubbling of the popup

Question

I am not sure how to prevent bubbling of js popup window. I made an a tag button with onClick event that leads to a delete function for removing images. When I click the button, popup closes really fast and the delete function often doesn't execute till the end.


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.preventDefault();` ----> `e.stopPropagation();` – Yousaf Apr 10 '21 at 04:38 — Yousaf, Apr 10 '21 at 04:38

score 1 · Answer 1 · answered Apr 10 '21 at 05:47

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

Hi I tried that one already and unfortunately it did not work :S, but I found the solution in the mean time! — Alan_dj, Apr 10 '21 at 11:51

Alan_dj · Answer 2 · 2021-04-10T12:04:59.667

So I managed to find the working solution. I forgot to mention in the description that no usage of e.preventDefault(); worked. Vlad Lew pointed me in the right direction confirming that I did not do anything wrong in the implementation of the e.preventDefault() in the first place and that the problem lies somewhere else.

The problem was that the browser jumped to the current location, as indicated by the empty href="" before the function could be executed.

I just needed to add ; return false after the function call in onclick!

I've got the a-ha moment after reading the question: 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;
  };
});

Thanks everyone!

Prevent bubbling of the popup

2 Answers2