能，但须用 event.currenttarget.dataset 读取绑定元素的 data-* 属性，避免 event.target.dataset；注意 ios 渲染时机、react/vue 异步更新、data- 仅支持字符串、防重复触发及非响应式特性。
data-* 属性在 touchstart/touchend 中能直接用吗
能，但必须注意事件对象的 target 和 currentTarget 区别。移动端触摸事件（touchstart、touchend、tap 等）和 click 一样，都支持通过 event.currentTarget.dataset 读取 data-* 属性，前提是绑定事件的元素本身设置了这些属性。
常见错误是写成 event.target.dataset —— 如果用户点的是按钮内的 <span></span> 或图标，target 就是那个子元素，它很可能没定义 data-id，结果读出来是 undefined。
- 永远优先用
event.currentTarget.dataset，它指向你绑定事件的那个元素 - 确保
data-属性写在绑定事件的标签上，而不是它的父容器或子节点 - 属性名中带连字符（如
data-item-id）会被自动转为驼峰（dataset.itemId）
为什么在 iOS Safari 上有时读不到 data 值
iOS Safari 对 data-* 的解析基本没问题，但实际踩坑多发生在 DOM 渲染时机或 React/Vue 等框架的异步更新上。比如：在 touchstart 触发瞬间，元素刚被动态插入，但 dataset 还未同步完成；或者使用了 innerHTML 插入含 data- 的 HTML 字符串，但浏览器未触发 dataset 重建。
- 避免用
element.innerHTML = '<button data-id="123">...</button>'动态注入，改用document.createElement+setAttribute - 在 React 中，确保
data-*是 JSX 属性的一部分（<button data-id="{item.id}"></button>），而非字符串拼接 - 不要依赖
touchstart立即读取——如果逻辑允许，延迟到touchend更稳妥，此时 DOM 状态更稳定
touch 事件里传复杂数据（比如对象）怎么处理
data-* 只支持字符串值，不能直接存对象或数组。强行 JSON.stringify 后塞进去虽可行，但有长度限制（尤其旧版 Android WebView），且可读性差、调试困难。
- 推荐只存唯一标识（如
data-item-id="abc123"），在 JS 里查表还原数据：itemsMap[e.currentTarget.dataset.itemId] - 如果必须序列化，用
JSON.stringify+encodeURIComponent防止特殊字符截断，读取时按顺序decodeURIComponent→JSON.parse - 避免在
data-里存函数、DOM 节点、Date 实例等无法序列化的值，会静默失败
和 click 事件混用时要注意什么
移动端同时监听 click 和 touchend 容易导致重复触发。而 data-* 本身不区分事件类型，但读取逻辑一旦写死在 handler 里，就可能因触发两次而执行两遍。
- 要么统一用
touchend（并加preventDefault()防止 click 再触发），要么统一用click（iOS 下 click 有 300ms 延迟，但现代viewport设置可消除） - 如果必须共存，加节流（
setTimeout+ 标志位）或用event.isTrusted判断是否真实用户触发（伪造事件通常为false） -
data-*值本身无性能问题，但频繁读取dataset在低端 Android 机型上可能比缓存变量稍慢，建议一次读完解构使用
实际最易被忽略的一点：data- 不是响应式机制。修改元素的 dataset 属性（如 el.dataset.id = 'new'）不会触发重新渲染，也不会让后续的 touchend 自动拿到新值——它只是 DOM 属性变更，你需要自己维护状态映射。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
