HTML按钮无法直接传参，需通过data-*属性存值并用事件委托读取，或用form提交；框架中应避免内联函数传参，须校验参数合法性与安全性。
HTML按钮本身不支持传参，得靠JavaScript绑定
HTML的 或 标签点击时不会自动把参数“带过去”，所谓“传参”其实是把数据提前存好，等点击时由JS读取并交给后端。常见错误是直接在 onclick 里写 addCart(id, name) 并期望函数能被全局调用——但现代项目多用模块化或框架，全局函数不可靠，且ID/name容易被XSS污染。
推荐做法：用 data-* 属性存参数，统一绑定事件处理器：
<button class="add-to-cart" data-product-id="1024" data-sku="A2024-BLUE" data-price="299">加入购物车</button> <button class="add-to-cart" data-product-id="1025" data-sku="A2024-RED" data-price="329">加入购物车</button>
然后用委托方式监听（避免每个按钮单独绑）：
document.addEventListener('click', function(e) {
if (e.target.classList.contains('add-to-cart')) {
const btn = e.target;
const id = btn.dataset.productId; // 注意驼峰转短横线：productId → product-id
const sku = btn.dataset.sku;
const price = parseFloat(btn.dataset.price);
addToCartAPI(id, sku, price); // 你自己的提交逻辑
}
});
用form提交也能“传参”，但适合简单场景
如果不需要前端交互、直接跳转或刷新页面，用 是最轻量的方案。它本质是通过 GET 或 POST 把字段发给后端，浏览器原生支持，无JS依赖。
关键点：
-
存非用户输入的数据（如product_id、quantity） - 按钮用
type="submit"，别用button，否则不会触发表单提交 - 后端接收的是表单字段名（
name），不是data-属性
React/Vue等框架里，别在模板里拼字符串传参
比如写 @click="addToCart(product.id, product.name)" 看似方便，但容易引发两个问题：一是组件重渲染时会反复创建内联函数，影响性能；二是若 product 是异步加载的，可能传入 undefined 导致运行时报错。
更稳妥的做法：
- Vue：用
v-bind绑定整个对象，或用计算属性预处理 - React：用箭头函数包裹（
() => addToCart(item)），但注意不要在render中定义新函数，应提至组件作用域或用useCallback - 所有框架下，都建议对关键字段做存在性校验，比如
if (!id || !Number.isInteger(Number(id))) return
容易被忽略的兼容性和安全细节
很多人只顾把ID塞进去，却忘了这些实际线上必踩的坑：
-
dataset只支持 ASCII 字母、数字和短横线，不能含下划线或大写字母（data-productId会被转成productid） - 用户可手动修改
data-属性值，所以任何服务端接口都必须校验权限和库存，不能信任前端传来的price - 多个同价商品共用一个按钮？别复用同一个
data-值——动态渲染时务必确保每个按钮的属性值与当前上下文严格对应 - 移动端双击放大、iOS Safari 的 click 延迟等问题，会让
click事件偶尔失效，建议加touchstart兜底或用pointerdown
参数不是塞进去就完事，它是一条从前端 DOM 到后端数据库的链路，每环都得有验证和兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
