单击 <link to="###"> 时如何显示确认框答案

【问题标题】：How to show a confirmation box when a <link to="###"> is clicked单击 <link to="###"> 时如何显示确认框
【发布时间】：2018-08-05 04:16:24
【问题描述】：

我想在用户点击时在 javascript 中显示一个确认框

<link to="###">XYZ <link>

我已经尝试过<Link onclick="return confirm('Are you sure?')" to="###" >XYZ</Link> 但它并没有给出想要的结果。

【问题讨论】：

?我想你的意思是

标签： javascript reactjs jsx

【解决方案1】：

（由于问题标签已更改，因此已编辑答案）

纯 HTML

<link> 不是您要执行的操作的有效标签；它专为页面调用和嵌入外部资源而设计。不允许有子内容，并且放在文档正文中时不会响应用户事件（我认为，虽然不确定，但它必须在文档中<head>。）

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link

任何有效的 HTML 实体都将按照您的说明工作：

<a onclick="return confirm('Are you sure?')" href="###" >XYZ</a>

<div onclick="return confirm('Are you sure?')" >ABC</div>

...但我怀疑您打算使用<a> 标签。（正如 ScottMarcus 在 cmets 中正确指出的那样，锚标记作为任意 javascript 的钩子是不正确的，但由于您在这里控制的是导航本身，因此它是一个合适的标记。）

在 ReactJS 中

您已将“reactjs”标签添加到问题中，因此很明显您尝试使用的实际上是 React 组件“Link”，而不是（完全不同的）HTML 标签。

我远非 React 专家，但您似乎需要 wrap the event handler in {} brackets 而不是引号（这会导致 React 将内容解释为字符串）——并且可能应该将 confirm 代码移动到React 组件中包含的函数。

【讨论】：

尽管通常这样做，但这里使用a 元素是不正确的。详情见我的回答。
@ScottMarcus 对于任意 javascript，是的，我当然同意。但是由于这里的 javascript 钩子是 return confirm(...) 我相信其目的是控制导航是否发生 - 所以在这种情况下 <a> 是一个合适的元素。

【解决方案2】：

link 元素不能以您想要的方式使用。它只允许在文档的 head 部分中使用，并用于链接到页面所需的外部资源。

此外，您首先不应该使用任何类型的链接来打开确认对话框，因为它在语义上不正确，并且会导致依赖辅助技术（如屏幕阅读器）查看页面的人出现问题。此外，您需要通过return false 或event.preventDefault() 取消单击链接的本机行为，这实际上意味着您正在向浏览器请求链接但请禁用该链接，这是反直觉的。链接 (<a>) 用于导航，不应仅用作触发某些 JavaScript 的“钩子”。

body 中的几乎所有元素都支持click 事件，对于这样的事情，button 或只是div 可以轻松完成这项工作。

document.querySelector("div").addEventListener("click", function(){
  console.log(prompt("What is your favorite color?"));
});

&lt;div&gt;Click Me&lt;/div&gt;

【讨论】：

另一个开发人员已经编写了一个反应前端代码，当有人点击它时，他使用连接到代码中的其他文件，我需要在允许用户继续之前添加一个确认框。有什么办法可以实现吗？
@Aman_Kawatra 鉴于link 不应该以这种方式使用，我认为它根本不会触发click 事件，这意味着onclick 或@987654335 @ 不会工作。您可以尝试事件委托并在祖先元素上设置事件侦听器，然后检查 event.target 以查看它是否是 link 元素，但即便如此，我也不相信 link 能够成为event.target。
@Aman_Kawatra "已经写好了 react 前端代码" 啊啊啊，解释完了。 <Link> 是一个 React 组件，框架会将其转换为有效的 HTML。如果你使用 React，你根本不应该在 DOM 中放置事件处理程序；它们属于组件代码。