Как остановить любую другую функцию, когда работает определенная функция

Question

У меня есть этот модал, который скользит сверху.Он работает нормально, но у меня есть и другая функция, которая щелкается и зависает, когда отображается модальное расположение.Я хочу знать, как я могу остановить эти функции, когда эта работает?Я посмотрел на операторы preventDefault и return, но я не знаю, как его использовать, если это решит проблему.А также я хотел бы знать, есть ли лучший способ упростить этот код.

var remove = document.querySelector('.remove');
var modal = document.querySelector('#project-layout');
var innerlayout = document.querySelector('#appended-layout');
var project = document.querySelectorAll('#project-grid');
for (var i = 0; i < project.length; i++) {
  project[i].addEventListener('click', function(e) {
    if (e.target === project[0]) {
      var tag = '<div class="layer1"><span>Ecommerce Store</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';
      innerlayout.innerHTML = tag;
      modal.style.top = '20%';
    } else if (e.target === project[1]) {
      var tag = '<div class="layer1"><span>Food Site</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';
      innerlayout.innerHTML = tag;
      modal.style.top = '20%';
    } else if (e.target === project[2]) {
      var tag = '<div class="layer1"><span>Real Estate Site</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';
      innerlayout.innerHTML = tag;
      modal.style.top = '20%';
    } else if (e.target === project[3]) {
      var tag = '<div class="layer1"><span>Online Course Site</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';
      innerlayout.innerHTML = tag;
      modal.style.top = '20%';
    } else if (e.target === project[4]) {
      var tag = '<div class="layer1"><span>Ecommerce Store</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';
      innerlayout.innerHTML = tag;
      modal.style.top = '20%';
    } else if (e.target === project[5]) {
      var tag = '<div class="layer1"><span>Ecommerce Store</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';
      innerlayout.innerHTML = tag;
      modal.style.top = '20%';
    } else if (e.target === project[6]) {
      var tag = '<div class="layer1"><span>Ecommerce Store</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';
      innerlayout.innerHTML = tag;
      modal.style.top = '20%';
    } else if (e.target === project[7]) {
      var tag = '<div class="layer1"><span>Ecommerce Store</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';
      innerlayout.innerHTML = tag;
      modal.style.top = '20%';
    }
  })
}

remove.addEventListener('click', function() {
  modal.style.top = '-80%';
})

Пожалуйста, дайте мне знать, если нужен код других функций.любая помощь будет оценена