可点击区域由事件捕获路径、元素层级、pointer-events和表单语义共同决定；半星点击本质是用户意图识别，需通过getboundingclientrect()与clientx实时计算坐标映射评分值，存储推荐整数倍或字符串格式。
可点击区域不是“画多大就有多大”，而是由事件捕获路径、元素层级、pointer-events 和表单语义共同决定的。半星与整星的点击划分，本质是「用户意图识别」问题，不是视觉切分问题。
为什么直接给 label 设固定宽度会失效
很多方案试图用 CSS 给每个 label 设置 width: 20% 来对应一颗星，再靠 clip-path 或 overflow: hidden 模拟半星——这在桌面端 hover 下看似可行，但一到移动端就崩：iOS Safari 的 :hover 不触发，touchstart 又不保证落在精确像素点上，用户手指一按，实际触发的是整个 label 区域，而非你预设的“左半颗”或“右半颗”。
-
label默认是块级，哪怕只显示半个图标，它的点击热区仍是整块矩形 - 用
display: inline-block+width控制，无法响应鼠标相对星体内部的位置（比如从星左边缘 30% 处点击，应算 2.5 星） - 禁用
pointer-events: none在父容器上，会导致 iOS 完全忽略所有点击（尤其 Safari 16+）
getBoundingClientRect() + clientX 是唯一可靠定位方式
要真正区分“点在星左半还是右半”，必须在事件中实时计算坐标。核心不是渲染半星，而是把用户点击位置映射为评分值。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 监听
click或touchend，避免mousemove带来性能抖动 - 调用
event.target.getBoundingClientRect()获取当前星星容器的视口位置 - 用
event.clientX - rect.left得到点击点相对于该星左边缘的横向偏移 - 对比偏移量与星宽：若
offsetX ，则视为“左半星”，取 floor(score)；否则取 ceil(score) - 移动端必须用
touches[0].clientX，且加event.preventDefault()防止双击缩放
半星值怎么存？别用浮点数当 value
<input type="radio" value="4.5"> 看似直观，但会引发后端解析歧义（比如 PHP 的 intval() 直接截断为 4）、JSON 序列化精度丢失、数据库字段类型不匹配等问题。
- 推荐用整数倍存储：value="45" 表示 4.5 星，后端除以 10 解析
- 或用字符串
value="4_5"，明确语义，避免数值运算误操作 - 不要依赖
step="0.5"的<input type="range">，它只约束输入值，不控制视觉反馈，且无法与 label 结构对齐 - 隐藏原生 radio 时，用
position: absolute; opacity: 0; pointer-events: none;，绝不用display: none（破坏可访问性）
真正难的不是画出半颗星，而是让每一次点击都可预测、可回溯、可无障碍使用。别在 CSS 里硬切图，先确保 input + label 结构完整，再用 JS 做坐标映射——这是目前唯一跨浏览器、跨设备、可测试、可维护的路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
