在运行特定功能时如何停止任何其他功能

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%';
})

请让我知道是否需要其他功能代码。任何帮助将不胜感激