Button标签onclick中location.href跳转失效问题求助

我来帮你排查下这个按钮跳转失效的问题～你提到按钮点击后只会刷新当前页，但标签能正常跳转，而且按钮之前是可以工作的，大概率是这几个原因导致的：

1. 按钮默认触发表单提交行为 #

如果你的是放在<form>标签里面的，浏览器会默认把的type设为submit——也就是说，点击按钮时会优先触发表单提交，直接刷新页面，完全覆盖了你写的onclick跳转逻辑。

解决办法：给按钮明确加上type="button"，告诉浏览器这只是一个普通按钮，不会触发表单提交：

<?php $url2 = "mission_schedule.php?id=" . urlencode($_GET['id']);?>
<button type="button" onclick="location.href='<?php echo $url2; ?>'">Next</button>

2. onclick属性的引号写法不规范 #

你原来的代码里onclick=location.href='<?php echo $url2; ?>';没有给onclick属性值加引号，虽然有时候能正常解析，但如果$url2里出现特殊字符（哪怕你用了urlencode，也可能遇到边缘情况），就会导致JS解析错误，跳转失效。

规范写法：给onclick加上双引号，内部的URL用单引号包裹，确保解析稳定：

<?php $url2 = "mission_schedule.php?id=" . urlencode($_GET['id']);?>
<button type="button" onclick="location.href='<?php echo $url2; ?>'">Next</button>

3. 页面新增的JS逻辑干扰了点击事件 #

如果最近你修改过页面的JS代码，有可能新增了事件委托、阻止默认行为的逻辑，比如preventDefault()或者stopPropagation()，导致按钮的onclick无法正常执行。

排查方向：检查页面里的其他JS代码，看有没有针对按钮或者父元素的点击事件处理，是否意外阻止了跳转行为。

替代方案：用按钮包裹标签 #

如果你不想纠结JS的问题，也可以直接用

包裹能正常工作的标签，再调整下样式让它看起来像一个统一的按钮：

<?php $url2 = "mission_schedule.php?id=" . urlencode($_GET['id']);?>
<button type="button" style="border: none; background: transparent; padding: 0;">
  <a href="<?php echo $url2; ?>" style="text-decoration: none; color: inherit; display: block; padding: 8px 16px; border: 1px solid #ccc; border-radius: 4px;">Next</a>
</button>

至于为什么标签能正常工作？因为本身就是专门用于页面跳转的元素，不会触发表单提交，也没有默认的提交行为，所以不受这些因素影响～

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