javascript - How to consume button click inside <a> tag to prevent link being followed?

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=""><button style="position: relative; float: right;" onclick="detectClick('Google')"><img src="cross.png"></button>Google</a></div>

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."><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.

Share Improve this question edited Mar 6, 2017 at 9:34 Sumit patel 3,90311 gold badges37 silver badges65 bronze badges asked Mar 6, 2017 at 9:29 HomerPlata 1,7975 gold badges23 silver badges42 bronze badges

return false ? – Matteo Tassinari Commented Mar 6, 2017 at 9:30
Then take the link out all together and just have the button. – Patrick Evans Commented Mar 6, 2017 at 9:36
Patrick, the link still has to be clickable unless you click the cross button. – HomerPlata Commented Mar 6, 2017 at 9:39

Add a ment |

5 Answers 5

Sorted by: Reset to default 4

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.

<script type="text/javascript">
 function detectClick(message){
  window.alert("Detected: " + message);
  return false;
 }
</script>

You need return false; at the end of detectClick and you need to return detectClick on your onclick event.

Explanation: The return value of the event handler tells the browser whether the default browser action should occur. Since clicking on your button by default triggers the click event of its parent, the link, return false; will prevent that default from happening, which is your exact intention.

Remove your href tag from link tag. Add a id to that link tag. And assign the href value in the detectClict(). like-->

<html>
<head>
<title>Consume Click Test</title>    
</head>
<body>
    <div><a id = "link" style="border: solid 1px black; vertical-align:middle; display:inline-block;" > <button style="position: relative; float: right;" onclick="detectClick('Google')"><img src="cross.png"></button>Google</a>     </div>
</body>
</html>
<script type="text/javascript">
    function detectClick(message){
        window.alert("Detected: " + message);
        document.getElementById("link").href = "http://www.google.";
  }
</script>

<html>
<head>
<title>Consume Click Test</title>    
</head>
<body>
    <div><a style="border: solid 1px black; vertical-align: middle; display:inline-block;" href="javascript:void 0;"><button style="position: relative; float: right;" onclick="detectClick('Google')"><img src="cross.png"></button>Google</a></div>
</body>
</html>
<script type="text/javascript">
    function detectClick(message){
        window.alert("Detected: " + message);
    }
</script>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to consume button click inside <a> tag to prevent link being followed? - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)