在单击元素但在元素内部的事物上启动事件

Question

您好，我制作了抽屉，当您单击它时会出现，然后扩大它的宽度，第二次单击后，它回到最小化的形式，在这个抽屉中，我有带复选框的桌子等，稍后将用它来过滤东西。问题是，如果我单击表格内的复选框，则抽屉处于隐藏状态。仅在我单击桌子以外的地方的情况下，允许切换抽屉宽度的事件才会起作用吗？据我所知，它应该对stopPropagation做些什么，但是以某种方式我无法以工作形式实现它。

<div class="filter_drawer" onclick="show_stat()">
        <Table class="stat_table">
            ...some content
        </Table>
    </div>

function show_stat() {
    event.stopPropagation()
    var stats = document.querySelector('.filter_drawer')
    var table = stats.querySelector('.stat_table')
    var panels = document.querySelector('.main_container')

    stats.classList.toggle('expanded_stat')
    table.classList.toggle('show')
    panels.classList.toggle('expanded_stat_panel')

}

Answer 1

改为使用Javascript将侦听器正确地分配到元素，然后您可以检查event.target是否为.filter_drawer元素。如果是这样，那就是单击直接元素，而不是其后代之一：

document.querySelector('.filter_drawer').addEventListener('click', (e) => {
  if (e.target.matches('.filter_drawer')) {
    showStat();
  }
});

（如果单击是在后代元素上，而不是在filter_drawer本身上，则e.target测试将不匹配）

不需要stopPropagation。