我有一个位于“a”标签（在next.js中为Link）中的div，其中还有一个“like”div。如果我点击div中的任何地方，我希望它带我去“a”标记所指向的地方。然而，如果我点击“喜欢”div，我不希望它带我去任何地方;相反，我希望触发一个JavaScript脚本。
如何做到这一点？还有别的办法吗它应该如何看起来既实用又SEO友好？
在Twitter上，有类似的东西：整个“tweet”都是可以点击的，可以把你带到另一个页面，而像“like”这样的按钮则可以正常工作，这就是我想要达到的效果。

'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

我试过使用e.nativeEvent.stopImmediatePropagation();，但不工作。
LikeCard外部组件包裹的一部分

<Link href={href}>
                  <LikeCard likes={likes}/>
    </Link>