When I click tag <button>, tag <a> clicked directly. How to solve it? or any other way?
Asked
Active
Viewed 5,149 times
0
-
Wheres the js code? – Eddie Dec 13 '17 at 06:57
-
3Would love to help, if you share your code – Gerardo BLANCO Dec 13 '17 at 06:58
-
6[`event.stopPropagation()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation). – Satpal Dec 13 '17 at 07:00
-
Why do you have a button inside of an `a` tag? but it can be fixed with @Satpal instruction – Gezzasa Dec 13 '17 at 07:02
-
when I click tag `
` it direct to another page with tag ``. – Derry Dec 13 '17 at 07:05 -
You have to add event.stopPropagation() at the very beginning in your click event handler. – Nidhi Agarwal Dec 13 '17 at 07:09
2 Answers
4
tag <button> is child of tag <a>, that's why tag <a> clicked when you click <button>. Create tag <button> as sibling of tag <a> and position it over image with the help of css.
<a href="#">
<image src="">
</a>
<button>View<button>
Also use higher z-index for <button> to make it over tag <a>.
K Ravi
- 729
- 8
- 25
3
I think that's not possible. But, you can try removing the <a> tag or add pointer-events: none to the <a> tag.
The reason is, you're enclosed the button with a link tag. This make the button a link. So, clicking the button will trigger a click event on the enclosing link.
This can be handled via event.target and event.currentTarget in JavaScript.
Hope this helps!
Pranesh Ravi
- 18,642
- 9
- 46
- 70