求助：实现点击模态框外部关闭，点击prev/next链接不关闭

问题原因 #

当前prevslide和nextslide是modal-root的同级元素，并非.modal的子节点。点击这两个按钮时，事件会冒泡到modal-root的点击监听函数，触发模态框关闭逻辑；而现有代码仅阻止了.modal内部的事件冒泡，未处理这两个按钮的情况。

两种可行解决方案 #

方案1：在根容器点击事件中过滤目标元素 #

修改rootClick函数，判断点击对象是否为切换按钮或其内部元素，若是则跳过关闭操作：

function rootClick(e) {
  // 检查点击目标是否属于切换按钮
  if (e.target.closest('.prevslide, .nextslide')) {
    return;
  }
  modalRoot.classList.remove('visible');
}

该方案无需额外绑定事件，适合按钮结构简单的场景。

方案2：给切换按钮绑定事件阻止冒泡 #

给两个切换按钮单独添加点击事件，阻止事件冒泡到根容器，同时保留按钮的切换功能：

function setup() {
  // ... 原有代码
  let prevSlide = query('.prevslide');
  let nextSlide = query('.nextslide');
  
  // 添加按钮事件监听
  prevSlide.addEventListener('click', handlePrev);
  nextSlide.addEventListener('click', handleNext);
  
  // ... 原有函数
  
  function handlePrev(e) {
    e.stopPropagation();
    // 在这里添加上一张内容的切换逻辑
    console.log('切换到上一张');
  }
  
  function handleNext(e) {
    e.stopPropagation();
    // 在这里添加下一张内容的切换逻辑
    console.log('切换到下一张');
  }
}

该方案更灵活，可直接在事件函数中编写切换逻辑，精准控制事件传播。

完整示例代码（方案2） #

window.addEventListener('load', setup);

const get = document.getElementById.bind(document);
const query = document.querySelector.bind(document);

function setup() {
  
  let modalRoot = get('modal-root');
  let button = get('modal-opener');
  let modal = query('.modal');
  let prevSlide = query('.prevslide');
  let nextSlide = query('.nextslide');
  
  modalRoot.addEventListener('click', rootClick);
  button.addEventListener('click', openModal);
  modal.addEventListener('click', modalClick);
  prevSlide.addEventListener('click', handlePrev);
  nextSlide.addEventListener('click', handleNext);
  
  function rootClick() {
    modalRoot.classList.remove('visible');
  }
  
  function openModal() {
    modalRoot.classList.add('visible');
  }
  
  function modalClick(e) {
    e.stopPropagation();
  }
  
  function handlePrev(e) {
    e.stopPropagation();
    // 替换为你的上一张切换逻辑
    console.log('点击上一张');
  }
  
  function handleNext(e) {
    e.stopPropagation();
    // 替换为你的下一张切换逻辑
    console.log('点击下一张');
  }
  
}

内容的提问来源于stack exchange，提问作者Jenny