本文介绍一种健壮、无需硬编码 ID 的方式，利用事件委托与 DOM 遍历，精准获取用户点击的卡片内标题和价格等数据，并避免因 ID 错误或元素未找到导致的 Cannot read properties of null 报错。
本文介绍一种健壮、无需硬编码 id 的方式，利用事件委托与 dom 遍历，精准获取用户点击的卡片内标题和价格等数据，并避免因 id 错误或元素未找到导致的 `cannot read properties of null` 报错。
在实际开发中，为每张卡片动态生成唯一 ID（如 ${id}-product-name）虽可行，但极易因 ID 拼写错误、遗漏变量插值或 DOM 渲染时机问题引发 getElementById(...) 返回 null，最终触发 Uncaught TypeError。更优解是放弃依赖全局 ID 查找，转而基于事件目标定位当前卡片，再在其作用域内局部查询子元素——这正是现代前端推荐的“事件委托 + 作用域限定”模式。
✅ 推荐方案：事件委托 + closest() + querySelector()
// 1. 封装信息提取逻辑：接收 card 元素，返回结构化数据
const getCardInfo = (card) => {
const titleEl = card.querySelector('.card-title');
const priceEl = card.querySelector('.card-price');
return {
title: titleEl?.textContent?.trim() || '',
price: priceEl?.textContent?.trim() || ''
};
};
// 2. 定义点击处理逻辑
const onCardClick = (card) => {
const { title, price } = getCardInfo(card);
// 示例：添加到订单列表
const orderList = document.getElementById('orderList');
if (!orderList) return;
const li = document.createElement('li');
li.textContent = `${title} — ${price}`;
orderList.appendChild(li);
console.log('✅ 已添加:', { title, price });
};
// 3. 统一监听：利用事件委托，避免为每个卡片重复绑定
document.addEventListener('click', (event) => {
// 向上查找最近的 .card 祖先元素（支持点击图片、标题、空白区域等任意位置）
const card = event.target.closest('.card');
if (card) {
onCardClick(card);
}
});⚠️ 关键注意事项
- closest() 是核心：它从点击的目标元素开始，逐级向上查找匹配的选择器（.card），确保无论用户点在卡片内的图片、标题还是空白处，都能准确捕获所属卡片。
- querySelector() 作用域安全：在 card 元素内部查找 .card-title 和 .card-price，完全避开全局 ID 冲突与拼写风险。
- 可选链 ?. 提升健壮性：防止子元素缺失时抛出异常（如卡片结构临时变动）。
- 避免循环绑定：原代码中用 for 循环为每个 .cards 元素绑定事件，不仅性能低，且若卡片动态增删需重新绑定；事件委托天然支持动态内容。
- HTML 无需修改 ID：保留你原有的结构即可，无需为每个卡片预设 id 属性，大幅降低模板维护成本。
? 扩展建议
若需传递更多字段（如商品 ID、图片 URL），可在卡片上添加 data-* 属性：
<div class="card cards" data-product-id="54" data-image-url="https://.../pizza.png"> <!-- ... --> </div>
然后在 getCardInfo() 中读取：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
const productId = card.dataset.productId; const imgUrl = card.dataset.imageUrl;
这种基于语义化属性与 DOM 层级关系的设计，让代码更可读、可维护、可测试，是构建高可靠性交互组件的基石。
立即学习“Java免费学习笔记（深入）”；
