JavaScript preventDefault()

小灰灰 2020-06-02 14:54 545阅读 0赞

# JavaScript preventDefault()

此方法可以阻止事件的默认动作，它的名称也体现了这一点。

preventDefault由prevent和default合成，prevent表示"阻止"，default则表示"缺省"或"默认"。

默认动作，就是一个事件触发后浏览器默认动作行为。

比如点击超链接会出现跳转动作，这个跳转动作就是链接click事件的默认行为。

此方法符合W3C标准。

语法结构：

```javascript
event.preventDefault()
```

**浏览器支持:**

（1）.IE9+浏览器支持此方法。

（2）.edge浏览器支持此方法。

（3）.谷歌浏览器支持此方法。

（4）.opera浏览器支持此方法。

（5）.火狐浏览器支持此方法。

（6）.safria浏览器支持此方法。

**代码实例：**

```javascript
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"/> 
<meta name="author" content="http://www.dandelioncloud.cn/" /> 
<title>蒲公英云</title> 
<style type="text/css"> 
div { 
  width:150px; 
  height:30px; 
  line-height:30px; 
  margin:0px auto; 
} 
</style> 
<script type="text/javascript"> 
window.onload=function() { 
  let olink = document.getElementById("ant");
  olink.onclick = function (ev) { 
    ev.preventDefault(); 
  } 
} 
</script> 
</head> 
<body> 
  <div><a href="http://www.dandelioncloud.cn" id="ant">蒲公英云一</a></div> 
  <div><a href="http://www.dandelioncloud.cn">蒲公英云二</a></div> 
</body> 
</html>
```

上述代码当点击第一个链接不会出现跳转行为，原因分析如下：

（1）.为第一个链接注册click事件处理函数。

（2）.点击第一个链接原本会发生两件事情，执行事件处理函数，然后链接跳转，但是由于时间处理函数中调用了preventDefault方法，会阻止默认动作，所以不会出现跳转现象。此方法低版本IE浏览器不支持，如果有兼容低版本IE的需求，可以进行如下改造。

代码实例如下：

```javascript
if (e && e.preventDefault) {
  e.preventDefault();
}else{ 
  window.event.returnValue = false;
}
```

上述代码片段实现了兼容所有主流浏览器的功能，很简单不多介绍。

**preventDefault方法与return false:**

大家知道return false也具有阻止默认动作的功能。

那么为什么还要单独设计一个preventDefault方法，岂不是多此一举。

两者还是有不小区别，有时候return false不能完成阻止默认动作的功能，只能preventDefault出手。