React按钮onClick桌面需两次触发，移动端正常问题求助

我定义了如下主题列表：

const paperTopics = [
    "Teaching Aptitude",
    "Research Aptitude",
    "Comprehension",
    "Communication",
    "Mathematical Reasoning and Aptitude",
    "Logical Reasoning",
]

基于该列表渲染按钮组的代码如下：

{paperTopics.map((topic, index) => (
    <button
        key={topic}
        className={`border-1 w-full p-3 md:py-3 md:px-6 text-left gap-3 bg-slate-100 ${
            index === 0 ? "rounded-t-md" : ""
        } ${index === paperTopics.length - 1 ? "rounded-b-md" : ""} ${
        activePaperTopic === index ? "border-primary-500" : ""
        }`}
        onClick={(e) => {
            e.preventDefault()
            console.log(index) // 点击触发异常的代码
        }}>
            <p
                className={`text-sm ${
                    activePaperTopic === index ? "font-semibold" : "font-normal"
                }`}>
                    {topic}
            </p>
    </button>
))}

现在遇到的问题是：在开发者工具的移动端模式下，按钮点击一次就能触发onClick；但切换到桌面端模式时，必须连续点击两次才能触发。

核心问题：多余的e.preventDefault() #

原生<button>标签本身没有需要阻止的默认行为（除非它被放在<form>中作为提交按钮，但你的代码未体现这种场景）。在桌面端，调用e.preventDefault()可能干扰了浏览器的原生事件处理流程，导致第一次点击仅触发了焦点变化，第二次才真正触发点击事件。

解决步骤 #

1. 移除e.preventDefault()
   直接删除onClick回调里的这一行代码，修改后的点击事件如下：

   onClick={(e) => {
       console.log(index)
   }}
   

2. 排查其他可能干扰因素

   • 检查按钮的父元素是否存在onMouseDown、onClick等事件处理函数，是否调用了e.stopPropagation()或e.preventDefault()，导致按钮的点击事件被拦截。
   • 验证CSS样式：确认桌面端断点下，按钮没有被设置pointer-events: none这类禁用点击的样式，也没有被其他元素遮挡。

内容的提问来源于stack exchange，提问作者Shourya Shikhar