Within a div nested inside an "a" tag (specifically in Link within next.js), there is another div labeled as "like." When clicking anywhere within the main div, the intention is for it to redirect to the destination specified by the "a" tag. However, if the user clicks on the "like" div, the goal is not to navigate to a new page but rather trigger a JavaScript function.
How can this be achieved? Are there alternative methods? What is the optimal approach to ensure both functionality and maintain SEO-friendliness?
A comparable example can be found on Twitter: tapping on a tweet directs you to a separate page, while interactive elements like the "like" button perform their designated actions — this desired outcome is what I hope to replicate.
'use client'
import React from 'react'
interface LikeTypes {
likes:number
}
function LikeCard({likes}:LikeTypes ) {
const likeButtonClicked= () => {
};
return (
<div className='flex justify-center items-center ' onClick={(e) => { e.nativeEvent.stopImmediatePropagation(); likeButtonClicked(); }}>❤ {likes}</div>
)
}
export default LikeCard
I've attempted utilizing
e.nativeEvent.stopImmediatePropagation();Snippet from the wrapping component housing LikeCard:
<Link href={href}>
<LikeCard likes={likes}/>
</Link>