JavaScript中事件委托怎么结合自定义选择器在全局document上构建轻量级前端路由拦截-js教程-PHP中文网

事件委托结合自定义选择器在document上实现前端路由拦截，核心是监听全局click事件，捕获符合data-nav、[href^="/"]等规则的元素，阻止默认跳转并交由路由系统处理。

javascript中事件委托怎么结合自定义选择器在全局document上构建轻量级前端路由拦截

事件委托结合自定义选择器在 document 上实现前端路由拦截，核心是监听全局 click 事件，捕获符合特定规则（如 data-nav、[href^="/"] 或自定义属性）的点击元素，阻止默认跳转，提取路径后交由路由系统处理。它轻量、无需为每个链接重复绑定，且支持动态插入的节点。

用事件委托捕获符合路由规则的点击

在 document 上监听 click，利用 event.target 向上查找匹配自定义选择器的元素（如 [data-router-link]、a[data-nav] 或正则匹配 /^\/(?!\/)/ 的 href）：

优先检查 target.matches(selector)，不匹配则用 target.closest(selector) 向上找父级
避免拦截非导航行为（如表单提交、右键、修饰键点击）：加判断 event.button === 0 && !event.metaKey && !event.ctrlKey
对 <a></a> 标签，读取 href 属性后用 new URL(href, location.href).pathname 标准化解析路径，兼容相对路径

定义可复用的自定义选择器逻辑

不硬编码 selector 字符串，封装成函数，支持灵活扩展：

Java注释规范Skills

当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。

下载

基础版：isRouteLink(el) { return el.matches('a[data-router]') || el.closest('a[data-router]'); }
增强版：支持多模式，例如检查 el.hasAttribute('data-nav')，或 el.tagName === 'A' && /^\/|^\?/.test(el.getAttribute('href'))
可注入白名单前缀：const ROUTE_PREFIXES = ['/app', '/blog']; isRouteLink(el) { ... }

拦截并触发路由变更，保持浏览器状态同步

捕获到合法路由链接后，需做三件事：

调用 event.preventDefault() 阻止页面跳转
提取目标路径（推荐用 new URL(...).pathname + search，避免手动拼接错误）
调用路由函数（如 router.navigate(path)），内部用 history.pushState() 更新 URL 并触发视图更新；若需前进/后退同步，监听 popstate 事件补全