如何显示确认框<link to="###">被点击

Question

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

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

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

Answer 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 在评论中正确指出的那样，锚标签作为任意 javascript 的钩子是不正确的，但由于您在这里控制的是导航本身，它是一个合适的标签。）

在 ReactJS 中

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

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

Answer 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?")); });

 <div>Click Me</div>

如何显示确认框<link to="###">被点击

问题描述

2 个解决方案

解决方案1
0 2018-02-25 17:10:13

在纯 HTML 中

在 ReactJS 中

解决方案2
0 2018-02-25 17:12:28

如何显示确认框<link to="###">被点击

问题描述

2 个解决方案

解决方案1 0 2018-02-25 17:10:13

在纯 HTML 中

在 ReactJS 中

解决方案2 0 2018-02-25 17:12:28

解决方案1
0 2018-02-25 17:10:13

解决方案2
0 2018-02-25 17:12:28