使用jQuery阻止点击子div时触发window.location页面跳转

这是个很典型的事件冒泡导致的问题——当你点击子元素时，事件会顺着DOM树向上冒泡，最终触发父容器的点击跳转事件。下面给你几个实用的解决方案：

方法1：在子元素点击事件中阻止事件冒泡 #

最直接的方式就是给你的lightbox子div添加一个点击事件，在事件处理函数里调用event.stopPropagation()，阻止事件传递到父容器。

示例代码：

<div class="container" onclick="window.location.href='https://your-target-url.com'">
  <div class="lightbox" onclick="event.stopPropagation()">
    <!-- Lightbox内容 -->
  </div>
  <!-- 容器其他内容 -->
</div>

或者用更现代的事件绑定方式（推荐）：

const container = document.querySelector('.container');
const lightbox = document.querySelector('.lightbox');

container.addEventListener('click', () => {
  window.location.href = 'https://your-target-url.com';
});

lightbox.addEventListener('click', (e) => {
  e.stopPropagation(); // 阻止事件冒泡到父容器
  // 这里可以添加lightbox的其他逻辑，比如关闭弹窗
});

方法2：在父容器的点击事件中判断目标元素 #

如果你不想给子元素单独绑定事件，可以在父容器的点击处理函数里，判断点击的目标是不是lightbox或者它的子元素，如果是就不执行跳转逻辑。

示例代码：

const container = document.querySelector('.container');

container.addEventListener('click', (e) => {
  // 检查点击的元素是否属于lightbox
  if (e.target.closest('.lightbox')) {
    return; // 不执行跳转
  }
  window.location.href = 'https://your-target-url.com';
});

这里的closest()方法会向上查找最近的匹配选择器的元素，能很好地处理点击lightbox内部子元素的情况。

方法3：使用CSS pointer-events（适合无交互的Lightbox） #

如果你的lightbox只是纯展示，不需要任何点击交互，可以给它设置pointer-events: none，这样点击事件会直接穿透它，但是注意——这样lightbox本身也无法响应任何点击事件了，所以只适合不需要交互的场景。

示例CSS：

.lightbox {
  position: absolute;
  top: 0;
  left: 0;
  /* 其他样式 */
  pointer-events: none;
}

根据你的实际需求选一个最合适的方法就行，一般方法1和方法2是最常用的~

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