用 matches 可精准判断点击是否落在有效指示点上，需统一 class（如 .swiper-pagination-bullet），在容器上委托事件并过滤非目标元素，支持 active 和 disabled 状态判断，shadow dom 中可用 composedpath() 配合匹配。
在自研轮播图中，指示点（pagination dots）点击跳转逻辑常因事件冒泡、重复绑定或非目标元素触发而误执行。用 matches 可精准判断点击是否真正落在「有效指示点」上，避免无意义响应。
确保指示点有统一且可识别的选择器
为每个指示点设置明确的 class（如 .swiper-pagination-bullet），避免依赖标签名或位置索引。这样 matches 才能可靠匹配：
<div class="swiper-pagination"> <span class="swiper-pagination-bullet"></span> <span class="swiper-pagination-bullet active"></span> <span class="swiper-pagination-bullet"></span> </div>
在事件委托中用 matches 判断点击目标
将点击事件绑定在 pagination 容器上，利用 event.target.matches() 过滤非 bullet 元素（如空白区域、文字、嵌套子节点等）：
- 只对
.swiper-pagination-bullet触发跳转逻辑 - 忽略
event.target是容器本身、文本节点或其它子元素的情况 - 避免重复绑定导致多次响应（例如父容器和子元素都绑了 click）
const pagination = document.querySelector('.swiper-pagination');
pagination.addEventListener('click', (e) => {
if (!e.target.matches('.swiper-pagination-bullet')) return;
const bullets = Array.from(pagination.children);
const index = bullets.indexOf(e.target);
goToSlide(index); // 自定义跳转函数
});
处理 active 状态与禁用态的额外过滤
有时需跳过当前已激活的指示点，或禁用某些 bullet（如灰显不可点）。可在 matches 后叠加状态判断：
- 加
&& !e.target.classList.contains('active')避免重复切到当前页 - 加
&& !e.target.hasAttribute('disabled')支持 HTML disabled 属性语义 - 也可结合
getComputedStyle(e.target).pointerEvents === 'none'拦截 CSS 禁用
注意事件捕获阶段与 shadow DOM 场景
若轮播图运行在 Shadow DOM 内（如 Web Component），event.target 可能是 #shadow-root 下的节点，此时 matches 仍可用，但选择器必须与 shadow 内结构一致。必要时用 event.composedPath()[0] 获取最深触发元素再匹配。
