onClick 不适用于 <p> 元素，但适用于 <button> 元素

Question

export function SignoutButton() {
  return (
    <p onClick={() => signOut({ callbackUrl: "/" })}>
      <IoIosLogOut />
      Logout
    </p>
  );
}

我在 next.js 中有这个函数，但它不起作用，我浪费了很多时间，直到我将函数更改为这个

export function SignoutButton() {
  return (
    <button onClick={() => signOut({ callbackUrl: "/" })}>
      <IoIosLogOut />
      Logout
    </button>
  );
}

然后它开始工作有人知道原因吗？

我在顶部使用“使用客户端”，我拥有我认为应该拥有的一切，如果我遗漏了什么，请告诉我

还有额外的上下文，这是围绕此的代码

<ul className="mt-3 z-[1] p-4 shadow menu menu-sm dropdown-content bg-base-100 rounded-box">
    <li>
        <Link href="/profile">
        <FaRegUser />
        Profile
        </Link>
    </li>
    <li>
        <SignoutButton />
    </li>
</ul>

Answer 1

事件处理和行为可能会根据所使用的 HTML 元素而有所不同，按钮具有内置的单击处理并设计用于触发操作，而段落等其他元素主要并不用于交互操作。