js事件冒泡导致url改变的问题

conquerreact
  • 4
新手上路,请多包涵

今天遇到一个事件冒泡的问题,如果代码
image.png
这样写就没有问题
请求地址是http://localhost:8080/#/login
但是把阻止事件去掉,以这样的请求地址http://localhost:8080/#/login就会刷新一下页面
请求地址变成http://localhost:8080/?#/login才能继续请求。
有人知道原因么

回复
阅读 1.1k
6 个回答
✓ 已被采纳

<button type="button">btn</button>

我觉得你的重点应该方法 type 上面。 Internet Explorer 的默认类型是 "button",而其他浏览器中(包括 W3C 规范)的默认值是 "submit"。

那么问题就解决了,是你点了 submit 提交了表单,所以使用呢?

  1. 使用 type="button"
  2. 使用 阻止默认事件 .prevent

<form></form>内button标签的type属性默认是submit,点击会提交表单

阻止事件冒泡
event.stopPropagation()
阻止事件默认行为(例如你的 submit 默认行为)
event.preventDefault()

当点击 button 的时候,不仅触发了 submitLogin 方法,还会继续向上冒泡触发 form 的默认行为。

直接用div,简单粗暴,不用纠结

conquerreact
  • 4
新手上路,请多包涵

这个问题已经解决了。几位答友都说到了点上,可能碍于篇幅的缘故各位没有展开讲。
https://blog.csdn.net/whd526/...
这个讲解比较详细,有同学遇到类似问题可以看看

宣传栏