文章内容
2022/5/21 11:17:22,作 者: 黄兵
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 标签的跳转动作。
这都是基本的事件管理，要理解它，当触发事件处理程序时：
- 一些浏览器将参数传递给保存事件数据的回调（这是符合标准的做法）
- 其他浏览器（主要是旧的 IE）将事件数据放入window.event（在此处使用 just 访问event，这是有风险的，因为这依赖于没有具有该名称的局部变量）
接下来，e = e || event;是一种标准方式，即“如果未传递参数，则将其默认为||”之后的任何内容。在这种情况下，如果未传递事件参数，则它会查找全局变量。
e.returnValue 是阻止事件导致其默认操作的三种方法之一。另外两个是 e.preventDefault && e.preventDefault()
下面一个是取消 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();
这样就可以禁止按钮的默认动作了。
参考资料：
1、Why does this event handler use "e = e || event"?
黄兵个人博客原创。
转载请注明出处：黄兵个人博客 - Javascript 取消事件默认行为
111 on 回复 有用（0）
test