Chrome扩展开发求助：Ticketmaster SVG元素点击监听与批量选座

一、修复座位点击事件不触发的问题 #

1. 排查SVG元素的事件拦截 #

先检查目标座位元素（path/circle）的CSS属性pointer-events，如果值为none会直接阻止事件触发，可通过内容脚本强制修改：

// 确保座位元素能接收点击事件
document.querySelectorAll('#map-container path, #map-container circle').forEach(el => {
  el.style.pointerEvents = 'auto';
});

2. 替换第三方委托包，手写SVG兼容的事件委托 #

delegated-events对SVG元素的事件支持可能不完善，直接给#map-container绑定点击事件，手动判断目标元素：

document.querySelector('#map-container').addEventListener('click', (e) => {
  // 定位到最上层的座位元素
  const seatEl = e.target.closest('path, circle');
  if (!seatEl) return;
  
  // 确认是可点击的有效座位
  if (seatEl.classList.contains('available-seat')) {
    handleSeatClick(seatEl);
  }
});

3. 确保脚本在SVG加载完成后执行 #

Ticketmaster的座位图是动态加载的，用MutationObserver监听SVG渲染完成后再绑定事件：

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.addedNodes.length && document.querySelector('#map-container svg')) {
      bindSeatClickEvent();
      observer.disconnect();
    }
  });
});

observer.observe(document.body, { childList: true, subtree: true });

二、实现自动选中相邻座位的逻辑 #

1. 提取座位核心信息 #

点击单个座位时，先获取关键属性：

• 座位号：从data-seat-number、title或aria-label中提取
• 排号：从data-row属性或座位号的结构化命名中拆分
• 座位状态：通过class（如available/sold）判断是否可售

2. 定义相邻座位匹配规则 #

根据Ticketmaster的布局规律，相邻座位通常是同排内连续编号：

• 若座位号是结构化命名（如206-1、206-2），拆分排号和座位号，直接生成连续的目标座位ID
• 若依赖坐标，筛选同排（y坐标相近）且x值连续的可售座位

3. 批量选中目标座位 #

根据最大票数（比如6张），找到连续可售座位后模拟原生选中操作：

function handleSeatClick(currentSeat) {
  const maxTickets = 6;
  const currentSeatNum = parseInt(currentSeat.getAttribute('data-seat-number'));
  const rowNum = currentSeat.getAttribute('data-row');
  
  // 生成目标座位编号范围
  const targetSeatNums = Array.from({length: maxTickets}, (_, i) => currentSeatNum + i);
  
  // 遍历选中有效座位
  targetSeatNums.forEach(num => {
    const targetSeat = document.querySelector(`[data-row="${rowNum}"][data-seat-number="${num}"]`);
    if (targetSeat && targetSeat.classList.contains('available')) {
      // 触发原生点击或手动添加选中样式
      targetSeat.click();
      targetSeat.classList.add('selected-seat');
    }
  });
}

4. 处理边界情况 #

• 若当前座位附近连续可售座位不足最大票数，自动取从当前座位开始的最大连续数
• 跳过已售出座位，避免无效操作

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