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

Question

你好，我做了一个抽屉，当你点击它时它会出现，然后展开它的宽度，第二次点击后，它回到它的最小化形式，在这个抽屉里我有 table 和我将使用的复选框等稍后过滤东西。问题是，如果我单击 table 内的复选框，抽屉就会隐藏。只有当我点击它时，允许切换抽屉宽度的事件才会起作用，除了 table 的地方？据我所知，它应该对 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。

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

Launch event on click of element but on things inside element

javascript

stoppropagation