React.js 应用程序 - 使区域可点击

Question

我的 React.js 应用程序已启动并运行，一切正常。根据建议/请求，我被要求添加一种隐藏按钮/区域，我可以单击以执行特定任务。它不应该是一个可见的按钮，建议是使当前时钟可点击（或它的某个部分）。

首先，我认为我可以制作一个 div，将其设置为我想要的大小，然后在 div 标签中添加一个 onClick。它有效，但它并没有我想要的那么好。似乎可点击区域延伸到了 div 标签之外，这对我来说真的很奇怪。

我为 div 标签添加了一个简单的边框，以确保它不会比我预期的大，但事实并非如此。但是，可点击的部分太大了。

<div className="test" onClick={...}>Clock</div>

这就是我做我的div的方式。正如我所说，它有效，但它并不像我想要的那样有效。所以我的问题分为两部分：如果有人知道为什么我的可点击区域看起来比它应该的大（我已经在 css 中定义了宽度和高度，并且由于边框，我可以清楚地看到该区域) - 或者是否有人已经完成/知道一些类似的问题解决方案。我可以在页面上定义某个区域并使其可点击吗？我不希望它被看到，所以它需要是透明的，并且不会妨碍应用程序的其余部分。

感谢我能得到的所有建议。

Answer 1

我认为这里的情况可能是Event bubbling。如果您不熟悉事件冒泡，这意味着您可能在“另一个元素”之上有一个“元素”，并且您的“元素”例如被单击（或发生了其他事件），它将将该事件传递给其父级默认情况下，您的“另一个元素”就像被点击一样。要查看是否是这种情况，您可以查看 div 元素顶部是否有“任何元素”，类名称为 test，以及是否附加了任何点击处理程序。如果是这样，您可以简单地在该“任何元素”单击处理程序上附加一个 e.stopPropagation 方法调用