如何限制JavaScript点击事件仅在id为main的指定section区域触发？

架构老林

2026-8-30

问题原因

你当前的实现存在3个核心问题，导致点击全页面都会触发跳转：

事件绑定范围错误：把点击事件绑定在了document.body上，属于全局监听，全页面任意位置的点击都会被捕获
判断逻辑写反：当前逻辑是视频display: block（显示状态）时无操作，非显示状态才执行隐藏+跳转，和需求完全相反
逻辑运算符使用不规范：用&&连接DOM修改和跳转赋值的写法不可靠，容易出现执行顺序问题

解决方案

方案1（推荐）：直接缩小事件绑定范围

从根源上避免全局监听，把事件直接绑定在id为main的第一屏section上即可，代码如下：

const video = document.getElementById('video');
const mainSection = document.getElementById('main');

mainSection.addEventListener('click', () => {
  // 仅当视频处于显示状态时，才执行隐藏+跳转逻辑
  if (video.style.display === "block") {
    video.style.display = "none";
    // 跳转到About区块，用hash跳转不会触发页面刷新
    location.hash = "#About";
    // 如果需要平滑滚动效果，可以替换成下面的写法
    // document.getElementById('About').scrollIntoView({ behavior: 'smooth' });
  }
}, true);

方案2：全局绑定时增加点击范围校验

如果因为页面内其他元素调用了stopPropagation阻止冒泡，必须保留全局捕获监听的话，可以在回调里判断点击事件是否发生在#main区域内：

const video = document.getElementById('video');
const mainSection = document.getElementById('main');

document.body.addEventListener('click', (e) => {
  // 校验点击目标是否在main区块内部
  const isClickInsideMain = mainSection.contains(e.target);
  // 点击不在main区域、或视频已经隐藏，直接终止逻辑
  if (!isClickInsideMain || video.style.display !== "block") return;

  video.style.display = "none";
  location.hash = "#About";
}, true);