Button内嵌numeric input触发默认跳转问题及解决咨询

问题根源是嵌套在button内的input元素，其操作事件（点击上下箭头、回车确认值）会向上冒泡触发外层button的点击事件，进而执行跳转逻辑。以下是几种可行的解决方式：

方式一：阻止input事件冒泡 #

给input元素添加事件处理，阻止操作事件向上传播到button，避免误触发跳转：

<button onclick="window.location.href='?N='+document.getElementById('minutes_forward').value;">
  <input type="number" id="minutes_forward" name="minutes_forward" value="20"
         onclick="event.stopPropagation()"
         onkeydown="if(event.key === 'Enter') event.stopPropagation()" />
</button>

• onclick="event.stopPropagation()"：阻止点击input上下箭头时的事件冒泡
• onkeydown：拦截回车按键的事件传播，避免回车修改值后触发button跳转

方式二：调整DOM结构（推荐） #

从语义化和交互合理性角度，不建议将input嵌套在button内，直接把两者放在同一层级：

<input type="number" id="minutes_forward" name="minutes_forward" value="20" />
<button onclick="window.location.href='?N='+document.getElementById('minutes_forward').value;">确认</button>

这种结构从根本上避免了事件冒泡的问题，同时符合HTML的语义规范，后续维护也更清晰。

方式三：修改button的类型（辅助优化） #

给button添加type="button"属性，明确其为普通按钮，避免浏览器默认的submit行为干扰（虽然当前场景没有表单，但能进一步降低意外触发的概率）：

<button type="button" onclick="window.location.href='?N='+document.getElementById('minutes_forward').value;">
  <input type="number" id="minutes_forward" name="minutes_forward" value="20"
         onclick="event.stopPropagation()"
         onkeydown="if(event.key === 'Enter') event.stopPropagation()" />
</button>

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