html 表单里button脱离表单,有关form表单的button事件

今天要实现一个功能，遇到一个坑，自己折腾了很久，记录一下以提醒自己以及他人。代码如下：

站点:

时间:

从

到

查询

当我在button上面绑定事件的时候，始终不能成功。查错的时候一直以为是自己的js有误，就在那里不停的调js，然后一直查不出原因，请教同事，也是查不出js的原因，突然我对同事说，会不会是我的HTML有问题。然后我们就来查HTML，最开始也是没有发现什么问题，然后我就说我把button移个位置试试，结果位置变化后，button绑定事件居然成功了。反复移动位置之后，终于发现，居然是form的原因，当form标签包裹button之后，就获取不到button的绑定事件了。form一般是表单，但是我在这里使用并不是为了创建表单，而是使用form来包裹整个部分。获取不到绑定事件因为点击了button之后，页面会执行form的action，也就是自动提交表单。为了让页面执行button绑定的事件，需要在form中增加 onSubmit="return false;"或者将button的type=“button”属性，或者是form中的 。最简单的方法是，button标签尽量少和form一起使用。