Javascript 取消事件默认行为

Javascript 取消事件默认行为

最近在使用表单的时候,默认点击按钮会通过 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();

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