如何使用按钮点击里面< a>标签，以防止链接被遵循？ [英] How to consume button click inside <a> tag to prevent link being followed?

问题描述

我在里面添加了一个按钮一个带有一点交叉图像的链接标记，我最终会用它来实际删除该元素而不用它也跟着链接：

  function detectClick（message）{window.alert（Detected：+ message）;}  

 < div>< a style =border：solid 1px black; vertical-align：middle; display：inline-block; href =http://www.google.com>< button style =position：relative; float：right; onclick =detectClick（'Google'）>< img src =cross.png>< / button> Google< / a>< / div>  

一旦执行 detectClick（...），我该如何使用该点击，为了防止离开当前页面？

注意：理想情况下，不使用jQuery。

解决方案

首先将您的功能更改为：

  function detectClick（消息）{
 window.alert（检测到：+消息）; 
返回false; //添加此行
} 
  

然后更改 onclick 处理程序：

  onclick =return detectClick（'Google'）//注意返回
  

请注意，HTML标准的AFAIK不允许在锚点内设置按钮。 / p>

I've added a button inside a link tag, with a little cross image, that I will eventually use to actually remove that element without it following the link also:

function detectClick(message) {
  window.alert("Detected: " + message);
}

<div><a style="border: solid 1px black; vertical-align: middle; display:inline-block;" href="http://www.google.com"><button style="position: relative; float: right;" onclick="detectClick('Google')"><img src="cross.png"></button>Google</a></div>

How do I consume that click, once it has executed detectClick(...), in order to prevent navigation away from the current page?

NOTE: Ideally, without using jQuery.

解决方案

First change your function to:

function detectClick(message){
    window.alert("Detected: " + message);
    return false; // add this line
}

then change the onclick handler to:

onclick="return detectClick('Google')" // note the "return"

Please do note that AFAIK the HTML standard does not allow to have a button inside an anchor.

这篇关于如何使用按钮点击里面< a>标签，以防止链接被遵循？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！