CODEWITHSUNDEEP
javascripthtmlcss
HomerPlata
HomerPlata

Reputation: 1797

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

Upvotes: 2

Views: 4419

Answers (5)

Ram Thota
Ram Thota

Reputation: 587

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.com";
  }
</script>

Upvotes: 0

Lajos Arpad
Lajos Arpad

Reputation: 77045

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.

Upvotes: 1

scarleter
scarleter

Reputation: 37

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

Upvotes: -1

Matteo Tassinari
Matteo Tassinari

Reputation: 18584

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.

Upvotes: 4

mayersdesign
mayersdesign

Reputation: 5310

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

Upvotes: 1

Related Questions