Javascript 从父容器（某些子容器除外）获取单击事件

预期行为：当我单击

.parent

类时，将显示项目详细信息模式，但如果我单击

.dropdown

或其任何选项，则不会显示该模式

<div class="parent click-for-item-detail">

  <div class="dropdown">                                         
    <a href="#" class="dropdown-toggle " data-toggle="dropdown">Options</a>                                         
    <ul class="dropdown-menu">                                         
      <li><a href="#">option-1</a></li>
      <li><a href="#">option-2</a></li>                                         
    </ul>                                      
  </div>

  <div class="item-image"><img class="click-for-item-detail" src="image.jpg></div>

  <div class="info">
    <a href="#" class="click-for-item-detail">Item title</a>
    <div class="click-for-item-detail"> item subtitle</div>
  </div>

</div>

---

我在每个应该触发item detail模式的元素中添加了

click for item detail

类。有没有更好的方法来实现这一点？

您可以指定一些能够触发的选择器

阅读以下文章以更好地理解

$（.info，.item image”）。在（“单击”，函数（）上{
控制台日志（“触发器”）；
});





项目字幕
您可以使用选择器筛选出不需要单击的元素：


$（'.parent>：不是（.dropdown'）。单击（函数（e）{
警报（“模态”）；
//显示模态
});





项目字幕
Phong所说的是真的，这是有效的。但是，想象一下，现在您的父元素中有许多子元素都与该选择器匹配。使用下面的方法，您可以向这些元素中的每个元素添加一个事件侦听器

$(".parent").on("click", (e) => e.target.tagName == 'LI' && console.log('fire event'))

$（.info，.item image”）。在（“单击”，函数（）上{
控制台日志（“触发器”）；
});

在第一种方法中，无论父元素中有多少子元素，您已经非常接近只有一个侦听器

考虑以下示例：


没有
点击
事件


$（.parent”）。在（“单击”上，函数（e）{
如果（！e.target.classList.contains（'parent'））{
返回console.log（'无事件'）
} 
console.log（'火灾事件'）
});

这被称为事件委派，您几乎已经这样做了。在这里，我正在检查我正在单击的元素是否确实是类parent，只有这样我才会触发我的事件

当然，您可以进行各种检查，例如仅检查
元素

$(".parent").on("click", (e) => e.target.tagName == 'LI' && console.log('fire event'))

这里来看看这个例子

我建议对事件委派和事件冒泡进行web搜索。
将显示项目详细信息模式，但如果单击.dropdown或其任何选项，则不会显示该模式。你能详细解释一下吗？到目前为止，您尝试了什么？以下是我尝试的@Phong。可能值得注意的是，这还可以防止在父节点内移动或克隆节点时出现任何欺诈行为，因为在这种情况下它们将丢失事件侦听器。