一个关于form标签和button标签的小坑

如果在form标签中嵌套了button标签，那么点击button时会自动提交form。

<form id="testForm" action="/test" method="POST">
    <input id="testInp" size="50" placeholder="请输入内容"/>
    <button id="testBtn">按钮</button>
</form>
<script>
    $('#testForm').on('submit', function (ev) {
        ev.preventDefault();
        ev.target.reset();
        console.log('submit');
    })

    $('#testInp').on('input', function (ev) {
        console.log('input');
    })

    $('#testBtn').on('click', function (ev) {
        console.log('click');
    })
</script>

 

如果不想被提交那么给button加一句

$('#testBtn').on('click', function (ev) {
    ev.preventDefault();
    console.log('click');
})