如何阻止点击链接的内部元素时触发链接？

Question

我有一个位于“a”标签（在next.js中是链接）内部的div，里面还有一个“like” div。如果我在div的任何地方点击，我希望它能带我到“a”标签指向的位置。然而，如果我点击“like” 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>

- user2983982347

---

我有一个在"a"标签内部的div。只是提醒一下，这不是有效的HTML。你不能将一个块级元素放在内联元素内部。 - undefined

Answer 1

preventDefault应该可以工作

document.querySelector('button').addEventListener('click', e => {
  e.preventDefault()
})

<a href="https://stackoverflow.com">
  Post: <button>Like</button>
</a>

- Konrad

Answer 2

你可以在这里使用其中一种方法。

1. 通过传递给事件处理程序的事件对象。

   function someFunction (event) {

   event.preventDefault();
   

   }

   这将阻止浏览器的默认行为。

2. 其次，使用 href="javascript:void(0)"

- Muhammad Ahsan