最近在使用表单的时候，默认点击按钮会通过 action 值提交到后端，导致无法在表单出现问题的时候，无法很好的给出提示，所以决定使用 Javascript JQuery.ajax() 向后台提交数据，所以首先是需要取消表单按钮的默认事件动作。

取消默认事件的方法有下面三种方式：

• cancelable
• defaultPrevented
• preventDefault()
• returnValue

我们在使用的时候，大部分使用的是 defaultPrevented()，下面我就着重介绍 defaultPrevented()。

preventDefault() 方法取消浏览器对当前事件的默认行为，无返回值（IE8-浏览器不支持该方法），如果此事件没有被显式处理，它默认的动作也不应该照常执行。

下面是 defaultPrevented() 的示例代码：

<a id="link" href="http://www.pdflibr.com">IP查询</a>
<script>
test.onclick= function(e){
    e = e || event;
    e.preventDefault();
}
</script>

这样你点击IP查询就不会跳转了。

也就是说通过这样方法取消了 a 标签的跳转动作。

下面一个是取消 button 的默认动作代码示例：

<form class="form-inline" action="{{ url_for('main.email_subscribe') }}" method="post">
    <div class="form-group">
        <div class="input-group">
            <input type="email" id="email" name="email" class="form-control" placeholder="邮件地址" maxlength="256" aria-describedby="email-subscribe">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
        </div>
    </div>
    <button type="submit" id="email-subscribe" class="btn btn-primary">订阅</button>
</form>

Javascript 代码：

function emailSubscribe() {
    // 邮件订阅功能
    $("#email-subscribe").bind("click", function (e) {
        // 禁止默认动作
        e.preventDefault();

这样就可以禁止按钮的默认动作了。