Question

不使用jQuery，只使用带有DOM的简单javascript。表单上有2个按钮，一个没有类型，一个类型=＆＃34;提交＆＃34;

以下是我的问题示例：

https://plnkr.co/edit/wAlpawx2wJUZ9FXWXL9h?p=preview

         <div>
            <button class="add">add</button>
        </div>
        <div>
            <button type="submit">submit</button>
        </div>

两个按钮都会触发提交事件。如何只获得类型=＆＃34的按钮;提交＆＃34;触发提交事件？

另外，如何保留表单数据，以便结果可以保留在＆＃34; pre＆＃34;触发提交时标记？

Answer 1

表单中button的默认类型为submit。如果您想阻止它触发表单提交，您需要设置type="button"。

有关详细信息，请参阅this问题。

Answer 2

将type属性设置为“button”或手动取消事件

<button type='button' class='add'>add</button>

-OR -

$('button.add').click(function(e){
    e.preventDefault(); // cancel default behavior
    // my add logic
});

Answer 3

您只需要使用“按钮”更改不想提交的按钮类型。我知道这感觉很奇怪，但按钮标签的默认类型是“提交”。

<button type="button">Add</button>

Answer 4

根据规格：

缺失值默认为提交按钮状态。

如果type属性处于Submit Button状态，则该元素特别是一个提交按钮。

W3C documentation

表单上的2个按钮只有1提交类型，但两个触发器都提交事件

4 个答案: