Button on card prevent new tab link from launching - reactjs

Question

I have a card component that has a green button on the top right, an image and text below it, I want to be able to click on anywhere on the card and for it to redirect to the url in the code; however if the green button is clicked, it should do nothing and not open the url. In the code below it doesn't do that, instead it always opens the url. I used href as it allows the left click on mouse to open in the same page, but the middle click to open a new tab while remaining in the same page which is very important.
Here is a link to a codeSandBox having the code: https://codesandbox.io/s/material-demo-forked-chy0d?file=/demo.js
Code:
export default function MediaCard() {
const classes = useStyles();
return (
<Card className={classes.root}>
<a href="sdfs">
<CardActionArea style={{ paddingTop: 50 }}>
<div
style={{
position: "absolute",
color: "white",
top: 8,
right: 8
}}
>
<Button
style={{ background: "green", color: "white" }}
onMouseDown={(e) => e.stopPropagation()}
size="small"
color="primary"
>
BUTTON
</Button>
</div>
<CardMedia
className={classes.media}
image="https://media.tarkett-image.com/large/TH_25121916_25131916_25126916_25136916_001.jpg"
title="Contemplative Reptile"
/>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
jnikn
</Typography>
<Typography variant="body2" color="textSecondary" component="p">
ijneodsk ipknv onfp o nf onopndsfc on pnojnc olpnoinoi hbib iubn
iujno nouno oijipj onoin ioio
</Typography>
</CardContent>
</CardActionArea>
</a>
</Card>
);

Answer 1

try this
import React from "react";
import { makeStyles } from "#material-ui/core/styles";
import Card from "#material-ui/core/Card";
import CardActionArea from "#material-ui/core/CardActionArea";
import CardActions from "#material-ui/core/CardActions";
import CardContent from "#material-ui/core/CardContent";
import CardMedia from "#material-ui/core/CardMedia";
import Button from "#material-ui/core/Button";
import Typography from "#material-ui/core/Typography";
const useStyles = makeStyles({
root: {
maxWidth: 345,
position: "relative"
},
media: {
height: 140
// marginTop: 50
}
});
export default function MediaCard() {
const classes = useStyles();
return (
<Card className={classes.root}>
<Button
style={{ zIndex:'1000',
position: "absolute",
top: 8,
right: 8,background: "green", color: "white",width:'70px',height:'30px' }}
onMouseDown={(e) => e.stopPropagation()}
size="small"
color="primary"
>
BUTTON
</Button>
<a href="sdfs">
<CardActionArea style={{ paddingTop: 50 }}>
<CardMedia
className={classes.media}
image="https://media.tarkett-image.com/large/TH_25121916_25131916_25126916_25136916_001.jpg"
title="Contemplative Reptile"
/>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
jnikn
</Typography>
<Typography variant="body2" color="textSecondary" component="p">
ijneodsk ipknv onfp o nf onopndsfc on pnojnc olpnoinoi hbib iubn
iujno nouno oijipj onoin ioio
</Typography>
</CardContent>
</CardActionArea>
</a>
</Card>
);
}