为什么你不应该使用div作为可点击元素的标签？技术解析与最佳实践

// ❌ 错误：使用div模拟按钮
<div class="btn" onclick="handleClick()">
  点击我
</div>
 
// ❌ 错误：使用div模拟链接
<div class="link" onclick="navigateTo('/page')">
  跳转到页面
</div>

<!-- 屏幕阅读器无法识别这是一个按钮 -->
<div onclick="submitForm()">提交</div>
 
<!-- 正确的语义化写法 -->
<button type="submit">提交</button>

// ❌ 使用div需要大量额外代码
document.querySelector('.custom-btn').addEventListener('click', handleClick);
document.querySelector('.custom-btn').addEventListener('keydown', (e) => {
  if (e.key === 'Enter' || e.key === ' ') {
    handleClick();
  }
});
document.querySelector('.custom-btn').setAttribute('tabindex', '0');
document.querySelector('.custom-btn').setAttribute('role', 'button');
 
// ✅ 使用button标签，原生支持所有功能
document.querySelector('button').addEventListener('click', handleClick);

<!-- 搜索引擎会正确识别并索引 -->
<a href="/product/123">查看产品详情</a>
 
<!-- 搜索引擎可能忽略这个"链接" -->
<div onclick="goToProduct(123)">查看产品详情</div>

<!-- 有助于SEO的语义化结构 -->
<nav>
  <ul>
    <li><a href="/">首页</a></li>
    <li><a href="/products">产品</a></li>
  </ul>
</nav>
 
<!-- 不利于SEO的非语义化结构 -->
<div class="nav">
  <div class="nav-item" onclick="navigate('/')">首页</div>
  <div class="nav-item" onclick="navigate('/products')">产品</div>
</div>

<!-- ✅ 正确：使用button -->
<button type="submit">提交表单</button>
<button type="button" onclick="validateForm()">验证</button>
 
<!-- ✅ 正确：使用input -->
<input type="submit" value="提交">
<input type="button" value="取消">

<!-- ✅ 正确：使用a标签 -->
<a href="/about">关于我们</a>
<a href="/contact" target="_blank">联系我们</a>
 
<!-- ✅ 正确：单页应用路由 -->
<a href="#/user/123" onclick="handleRoute(event)">用户详情</a>

<!-- ✅ 正确：使用适当的ARIA角色 -->
<div role="button" tabindex="0" 
     onclick="handleAction()" 
     onkeydown="handleKeydown(event)"
     aria-label="执行操作">
  自定义按钮
</div>

/* 重置button样式 */
button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  outline: none;
}
 
/* 重置a标签样式 */
a {
  color: inherit;
  text-decoration: none;
}
 
/* 自定义样式 */
.btn {
  padding: 12px 24px;
  background: #007bff;
  color: white;
  border-radius: 4px;
  transition: background 0.3s;
}
 
.btn:hover {
  background: #0056b3;
}

// TRAE IDE会提示：考虑使用button标签替代div
<div onclick="handleSubmit()">提交</div>
// ^^^ 提示：使用语义化标签可以提高可访问性

// 原始代码
document.querySelector('.custom-btn').addEventListener('click', handleClick);
 
// TRAE IDE建议的重构
// 将div替换为button，并移除不必要的JavaScript
<button onclick="handleClick()">按钮</button>

// ❌ 错误：使用div模拟按钮
<div onClick={() => setCount(count + 1)}>增加</div>
 
// ✅ 正确：使用button元素
<button onClick={() => setCount(count + 1)}>增加</button>
 
// ✅ 正确：使用Link组件进行导航
import { Link } from 'react-router-dom';
<Link to="/about">关于我们</Link>

<!-- ❌ 错误 -->
<div @click="handleSubmit">提交</div>
 
<!-- ✅ 正确 -->
<button @click="handleSubmit">提交</button>
 
<!-- ✅ 正确：使用router-link -->
<router-link to="/user/123">用户详情</router-link>

// ❌ 错误
<div (click)="onSubmit()">提交</div>
 
// ✅ 正确
<button (click)="onSubmit()">提交</button>
 
// ✅ 正确：使用routerLink
<a [routerLink]="['/product', productId]">查看产品</a>

// 使用div需要额外的事件监听和状态管理
const customButtons = document.querySelectorAll('.custom-btn');
customButtons.forEach(btn => {
  btn.addEventListener('click', handleClick);
  btn.addEventListener('keydown', handleKeydown);
  btn.addEventListener('focus', handleFocus);
  btn.addEventListener('blur', handleBlur);
});
 
// 使用原生button，浏览器自动处理所有交互
const buttons = document.querySelectorAll('button');
buttons.forEach(btn => {
  btn.addEventListener('click', handleClick);
  // 其他事件由浏览器原生支持
});