Javascript 在单击元素时启动事件，但在元素内部启动事件

您好，我制作了一个抽屉，当您点击它时，它会出现，然后扩展它的宽度，第二次点击后，它会回到它的最小形式，在这个抽屉里，我有一个带有复选框的桌子，稍后我会用它来过滤东西。问题是，若我点击桌子里面的复选框，抽屉就隐藏了。如何做到允许切换抽屉宽度的事件只有在我点击它时才起作用，除了桌子在哪里？据我所知，它应该与StopRopagation一起做一些事情，但不知何故，我无法以工作形式实现它

<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')

…一些内容
函数show_stat（）{
event.stopPropagation（）
var stats=document.querySelector（“.filter\u 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'））

---

}

使用Javascript将侦听器正确地连接到元素，然后您可以检查

事件.target

是否是

.filter\u drawer

元素。如果是，则直接单击元素，而不是单击其子元素：

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

（如果单击的是子元素，而不是

filter\u drawer

本身，则

e.target

测试将不匹配）

---

不需要停止播放

我已经加入了一个项目，其中大多数点击都是这样的，所以这就是为什么我保持这样的状态以避免弄乱，你再次救了我：）非常感谢你，它很有效！