如何处理 flexbox 中额外 space 上的事件？

Question

当有人点击（鼠标点击）元素周围的紫色 space 时如何处理？将一般的 onclick 放在容器上会覆盖单个项目的行为（它们都有自己的内部 onclick 处理程序）。还有其他方法可以解决这个问题吗？

编辑：

<Grid onClick={ClickHandler} container direction="row">
  <Grid item>
    // Filter Screen that has buttons, checkboxes
  </Grid>
  <Grid item>
    ............
  </Grid>
</Grid>

这里的问题是容器 ClickHandler 只是覆盖了过滤器屏幕具有的所有点击处理程序。所以那个战术没有成功。

Answer 1

我有一个我认为可行的想法，但我不确定这是最佳方法还是遵循最佳实践。我会在您的组件上使用。将 data-element="container" 之类的属性添加到您的父容器。如果单击处理程序中有 event.target.dataset.element === "container"，则表示您单击了元素周围的背景，否则您单击了其中一个元素。如有必要，您还可以将 data-element="componentN" 添加到容器内的每个组件，并为其中的各个组件移动 onClick 效果的逻辑。

Answer 2

Event 接口的 stopPropagation() 方法阻止了当前事件在捕获和冒泡阶段的进一步传播。但是，它不会阻止任何默认行为的发生；例如，仍会处理对复选框的点击。

<Grid onClick={ClickHandler} container direction="row">
  <Grid item onClick={(e) => e.stopPropagation()}>
    // Filter Screen that has buttons, checkboxes
  </Grid>
  <Grid item>
    ............
  </Grid>
</Grid>

如何处理 flexbox 中额外 space 上的事件？

How to handle events on the extra space in a flexbox?

html

css

reactjs

flexbox

material-ui