Button inside hyperlink div

Question

I have an element with an hyperlink. Inside the are also buttons, which should trigger their button actions, without triggering the hyperlink.

Demo code:

<a href="element.html">
 <div class="element_card">
   This is an card for an element with an hyperlink over the card.
    <button type="button" onclick="like_element()">
      Like the element but do not trigger the hyperlink.
    </button>        
 </div>
</a>

How can I disable the hyperlink for the button or cancel the event, so that the button area ia only triggering the onclick function for the button but not the hyperlink.

you will need javascript, but what have you tried until now, do you have some JS code? is it not working? — Calvin Nunes, Jan 30 '20 at 14:22
Your HTML is invalid. Buttons can't be descendants of anchors — j08691, Jan 30 '20 at 14:24
@j08691 why not? A block level anchor is akin to a div. OP just would need to stop the propagation when handling the button's click event. — GetSet, Jan 30 '20 at 14:25
Technically it will work, but doesn't follow the html spec. A workaround is to use a wrapping `div` with your `a` and `button` tags as children, then use css positioning to make the `button`s appear as if they are inside the `a` — Dane Stevens, Jan 30 '20 at 14:29

score 3 · Answer 1 · answered Jan 30 '20 at 14:24

3

You can use event.stopPropagation() to block the click from travelling up the chain.

answered Jan 30 '20 at 14:24

Dane Stevens

465
3
7

score 1 · Accepted Answer · answered Jan 30 '20 at 14:32

1

You can use event.stopPropagation() to prevent further propagation of the current event in the bubbling phases.

https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

answered Jan 30 '20 at 14:32

Or Ben-Yossef

399
2
17

score 0 · Answer 3 · answered Jan 30 '20 at 14:28

See if this works for you.

The default behavior of the <a> tag's onclick and href properties is to execute the onclick, then follow the href as long as the onclick doesn't return false, canceling the event (or the event hasn't been prevented) See if this works for you.

Answer

<a href="element.html">
 <div class="element_card">
   This is an card for an element with an hyperlink over the card.
    <button type="button" onclick=" return like_element()">
      Like the element but do not trigger the hyperlink.
    </button>        
 </div>
</a>

score 0 · Answer 4 · answered Jan 30 '20 at 14:45

using this inside href javascript:void(0)

function like_element(){
  console.log('working....!')
}

.element_card{
background-color: green;
}

<a href="javascript:void(0)">
 <div class="element_card">
   This is an card for an element with an hyperlink over the card.
    <button type="button" onclick=" return like_element()">
      Like the element but do not trigger the hyperlink.
    </button>        
 </div>
</a>

Button inside hyperlink div

4 Answers4