解决windowlocationhref不跳转的 BUG「建议收藏」

全栈程序员-站长 • 2022年7月15日下午9:00 • 未分类 • 阅读 15

大家好，又见面了，我是你们的朋友全栈君。

今晚写了代码发现了一个小BUG，记录下。

<form>———

        <p>
            <!--下面按钮-->  <div class="footerContainer">
                <button id="nextStep" οnclick="skip()">下一步</button>
                <p class="clear"></p>
            </div>
        </p>
    </div>
</form>

<script>
  function skip() {
 window.location.href="educate.html";
  }

</script>———–可以正常跳转

这块代码是可以正常跳转的，同样格式的另外一个页面却无法跳转。查看了资料大概是以下解决方法：

1——

原因是 a标签的hr e f跳转会执行在win do w.lo ca tion.h ref设置的跳转之前:

如果是表单form的话也会先执行form提交。

提交之后就已经不在当前页面了。所以 window.location.href无效。

我的代码无a标签，form也未设置提交，所以1方法不行。

2—–

点击事件中 οnclick=”checkUser()” 变成 οnclick=”return checkUser();”

并且在 check user中 return false;这样的话 a标签的h r e f也不会执行。这样就能win do w. lo cation.h ref顺利跳转。

尝试方法2失败。

3——-

如果是form体提交的话还可以把summit改成button调用j s提交，这样win dow.location.href也会在j s提交summit之前执行成功跳转。

方法3与问题中的代码不符合,因为问题代码form里面没有设置提交。

然后点击按钮在控制台打印出一个数字，发现控制台闪现一下数字就消失了。同时也没有出错，打断点发现

window.location.href="family.html";还是无法跳转，便察觉不是方法的问题，从布局下手，然后把按钮

拉到表单外，问题解决。

        <p>            <!--下面按钮-->  <div class="footerContainer">                <button id="previous">上一步</button>                <button id="nextStep" οnclick="skip()" >下一步</button>                <p class="clear"></p>            </div>        </p>    </div></form><script>    function skip() {      window.location.href="family.html";  };</script>--------无法跳转

修改后，可以正常跳转，一般控制台或页面闪现一下要出现的效果，都可以把按钮拖到form外面来解决。

<p>
            <!--下面按钮-->  <div class="footerContainer">
                <button id="previous">上一步</button>


                <p class="clear"></p>
            </div>
        </p>
    </div>
</form>
<button id="nextStep" οnclick="skip()" >下一步</button>
<script>
    function skip() {

      window.location.href="family.html";
  };
</script>------正常跳转