Javascript 如何使div可单击但忽略子项？

我有一张卡片，我希望它可以点击。这里的问题是我有一个数据属性，我需要单击事件的值。因此，当我点击图像时，它显然会使我未定义，因为错误的元素触发了点击事件。因此，我添加了指针事件：图像中没有指针事件，它工作了，但甚至必须将指针事件添加到figcaption中，因为这也将具有相同的行为

功能应用程序{ 回来 console.loge.target.getAttributedata模式} 数据模式=某些数据模式 className=游戏模式图形 > 示例标题 } ReactDOM.render，document.getElementByIdroot

---

您提出的需求的另一种选择是遍历到具有所述数据属性的最近元素-不需要指针事件：如果这样做，则无需指针事件

onClick={(e) => {
  // of course you would only need to traverse if child is clicked
  // you can write additional logic for that checking
  let data_mode = e.target.closest("figure").getAttribute("data-mode");
}}

但要完整回答，您可以简化CSS，如下所示：

figure * {
  pointer-events: none;
}

---

您提出的需求的另一种选择是遍历到具有所述数据属性的最近元素-不需要指针事件：如果这样做，则无需指针事件

onClick={(e) => {
  // of course you would only need to traverse if child is clicked
  // you can write additional logic for that checking
  let data_mode = e.target.closest("figure").getAttribute("data-mode");
}}

但要完整回答，您可以简化CSS，如下所示：

figure * {
  pointer-events: none;
}

---

或者像这样检查..ifevent.target.classList.contains'game-mode-figure'{…}@AbdullahAlNoor我这样做了，但仍然没有成功，我甚至尝试了event.target！=这是，但这些检查的问题是，我无法使div中的任何区域不可单击或像这样检查..ifevent.target.classList.contains'game-mode-figure'{…}@AbdullahAlNoor我这样做了，但仍然不起作用，我甚至尝试了event.target！=这但这些检查的问题是，我无法使div中的任何区域不可ickableit在这种情况下，您的第一种方法似乎更好，因为唯一的目的是在单击事件期间获取该数据属性，无论哪个元素是clickedIt，在这种情况下，您的第一种方法似乎更好，因为唯一的目的是无论单击哪个元素，都可以在单击事件期间获取该数据属性