防止在没有preventDefault的情况下从重叠组件触发onClick？

【问题标题】：Prevent onClick firing from overlapping components without preventDefault?防止在没有preventDefault的情况下从重叠组件触发onClick？
【发布时间】：2021-01-17 05:17:40
【问题描述】：

我有一个放置在另一个元素（绿色方块）上的文件选择器输入。绿色方块有一个启动模式的 onClick 函数。当我单击文件输入时，会触发两个 onClick 事件 - 一个用于文件管理器选择器，一个用于其后面的绿色元素。

我想防止绿色方形元素在单击文件选择器时触发 onClick。

如果我从 onClick() 调用 event.preventDefault()，它会成功阻止绿色元素 onClick，但也会阻止文件选择器输入启动。

stopPropagation 似乎什么也没做。

这是在 React 中。

【问题讨论】：

标签： javascript reactjs mouseevent

【解决方案1】：

您可以使用 stopPropagation() 来处理它； https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

let fileChooser = document.getElementById('fileChooser');
fileChooser.addEventListener('click', (event) => {
   event.stopPropagation();
   // ... your code
})

【讨论】：

无论出于何种原因，它都无法正常工作。无论我将 stopPropagation 放在 onClick 流中的哪个位置，底层元素都会触发其点击。除非我将 stopPropagation 放在链中如此高的位置以停止所有传播（在文件选择器触发 onClick 之前）。当我在点击事件中放置一个调试器时，调试器运行，点击 event.stopPropagation() 行，然后如果我点击“恢复”以中断代码调试器代码执行，调试器再次捕获第二个 onClick。很奇怪