本文介绍一种健壮、无需依赖硬编码 ID 的方式，利用事件委托与 DOM 遍历，精准获取用户点击的卡片中标题和价格等信息，并避免因元素未找到导致的 Cannot read properties of null 错误。
本文介绍一种健壮、无需依赖硬编码 id 的方式，利用事件委托与 dom 遍历，精准获取用户点击的卡片中标题和价格等信息，并避免因元素未找到导致的 `cannot read properties of null` 错误。
在实际开发中，为多个动态生成的卡片（如商品列表）绑定点击事件并提取其内部数据，是常见需求。但直接使用 getElementById 依赖预设 ID（如 ${id}-product-name）极易出错——尤其当 ID 拼写错误、未正确注入或元素尚未挂载时，会抛出 Uncaught TypeError: Cannot read properties of null (reading 'innerHTML')。
更可靠的做法是：不依赖全局唯一 ID，而是从事件目标出发，向上查找最近的卡片容器，再在其作用域内定位子元素。这正是事件委托（Event Delegation）+ closest() + querySelector() 组合的核心思想。
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
✅ 推荐实现方案（现代、简洁、可扩展）
// 提取单张卡片内的关键信息
const getCardInfo = (cardElement) => {
const titleEl = cardElement.querySelector('.card-title');
const priceEl = cardElement.querySelector('.card-price');
// 安全读取文本内容（避免 null 调用 textContent）
return {
title: titleEl?.textContent?.trim() || '未知商品',
price: priceEl?.textContent?.trim() || '暂无价格'
};
};
// 处理点击逻辑（例如加入购物车）
const onCardClick = (cardElement) => {
const { title, price } = getCardInfo(cardElement);
// 示例：添加到订单列表
const orderList = document.getElementById('orderList');
if (orderList) {
const li = document.createElement('li');
li.textContent = `${title} — ${price}`;
orderList.appendChild(li);
}
console.log('已添加:', { title, price });
};
// 使用事件委托监听所有卡片点击（推荐！）
document.addEventListener('click', (event) => {
// 向上查找最近的 .card 元素（即使点击的是图片或标题内部）
const card = event.target.closest('.card');
if (card) {
onCardClick(card);
}
});? 关键技术点说明
- event.target.closest('.card')：无论用户点击卡片内的图片、标题还是空白区域，都能准确捕获最外层 .card 容器，避免为每个子元素重复绑定事件。
- card.querySelector(selector)：在当前卡片作用域内查找，确保获取的是该卡片专属的数据，不会跨卡混淆。
- 可选链操作符 ?.：防止 querySelector 返回 null 后调用 textContent 报错，提升鲁棒性。
- 无需维护 ID 映射：摆脱对 ${id}-product-name 这类模板字符串的强依赖，HTML 结构更自由，JS 更易维护。
⚠️ 注意事项
- 确保 .card 类名在 HTML 中唯一标识卡片容器（不要与其他组件共用）；
- 若卡片内容异步加载（如通过 AJAX 渲染），需确保事件监听器在 DOM 就绪后注册，或使用 DOMContentLoaded 包裹；
- 如需传递额外元数据（如商品 ID、SKU），建议将数据存于 data-* 属性中（例如 <div class="card" data-product-id="54">），再通过 card.dataset.productId 读取，比拼接 ID 更清晰安全。
该方案兼顾简洁性与健壮性，适用于静态页面及动态渲染场景，是处理卡片交互的标准化实践。
