如何让实际的元素被点击而不是 Rails 不显眼的 javascript 形式？

问：

我有一个小的 React 16 菜单面板，它运行在 Rails 6 应用程序中。当面板打开时，如果用户在面板外部单击，我想关闭它并停止传播。（我不希望在菜单之外意外单击将用户带到另一个页面。

一般方法很容易理解 - 这里有一个问题来描述它。简而言之：

1. 在 React 组件中使用原生 JavaScript（即 ），在任何地方侦听 click 事件。document.addEventListener('click', callback)
2. 当该点击事件触发时，检查元素（即 event.target）是否在 React 菜单的 div 中。
3. 如果单击在 React 菜单之外，请关闭菜单，然后调用 and 以停止意外导航。event.preventDefault()event.stopPropagation()

这在我的简单测试用例中一切正常。（这是一把小提琴，只是为了证明它有效。

但是，如果用户单击锚标记，它会在我的嵌套 Rails 应用程序中失败，因为 Rails 的 Unobtrusive JavaScript 将侦听器添加到所有包含 data-method 属性的锚标记中。然后，不显眼的 JS 劫持事件，并将 HTML 表单注入正文。单击事件的目标将成为该新表单的输入。当我单击此处面板中的链接时，您可以看到正在动态创建的表单：

这意味着该属性是此动态注入表单中的输入，而不是用户单击的实际标记。event.targeta

所以我的问题是：我怎样才能得到用户点击的实际元素，这触发了表单的创建。

我尝试过/想到的东西：

• 不使用 .这适用于我菜单中的链接。但是，我无法执行 POST 事件，例如注销，以及使用 Rails 的辅助方法创建的任何链接。data-method
• 侦听而不是 .在这种情况下，事件的目标是正确的元素，但调用 preventDefault（） 实际上并不能阻止点击。onmousedownonclick
• 在我的菜单组件中使用表单而不是锚标记。这样，我就可以对注销操作执行 POST，而不必使用引入此处描述的问题的属性。它在这里起作用，因为如果我点击Rails应用程序中的链接，我就知道它在菜单之外。但这是一个棘手的解决方法，如果将来我想听其他一些点击，它不会给我灵活性。data-method