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

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

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

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

停止广播似乎什么也没做

---

这是在React中。

您可以使用stopPropagation（）来处理它

let fileChooser=document.getElementById（'fileChooser'）；
fileChooser.addEventListener（'单击'，（事件）=>{
event.stopPropagation（）；
//…您的代码
})

无论出于什么原因，它都不起作用。无论我在onclick流中的何处放置stopPropagation，底层元素总是触发其click。除非我把stopPropagation放在链的很高位置，以至于它停止了所有的传播（在文件选择器触发onClick之前）。当我在click事件中放置调试器时，调试器运行，点击event.stopPropagation（）行，然后如果我点击“resume”中断代码调试器代码执行，调试器会在第二次单击时再次捕获。很奇怪