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实体都可以正常显示：

＆＃13;

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

＆＃13;

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

在ReactJS

中

您已经添加了＆＃34; reactjs＆＃34;标记到问题，因此很明显，您尝试使用的实际上是React组件＆＃34; Link＆＃34;而不是（完全不同的）HTML标签。

我远离React的专家，但似乎你需要wrap the event handler in {} brackets而不是引号（这会导致React将内容解释为字符串） - 并且应该移动{{ 1}}代码到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 个答案:

以纯HTML格式

在ReactJS