文章导航

JavaScript preventDefault()

2018-11-6 10:51| 作者: admin| 查看: 1809| 评论: 0|来自: 蚂蚁部落

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

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

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

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

此方法符合W3C标准。

语法结构:

[JavaScript] 纯文本查看 复制代码
event.preventDefault()

浏览器支持:

(1).IE9+浏览器支持此方法。

(2).edge浏览器支持此方法。

(3).谷歌浏览器支持此方法。

(4).opera浏览器支持此方法。

(5).火狐浏览器支持此方法。

(6).safria浏览器支持此方法。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"/> 
<meta name="author" content="http://www.softwhy.com/" /> 
<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.softwhy.com" id="ant">蚂蚁部落一</a></div> 
  <div><a href="http://www.softwhy.com">蚂蚁部落二</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也具有阻止默认动作的功能。

关于return false更多内容可以参阅JavaScript return false一章节。

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

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

具体区别可以参阅preventDefault与return false区别一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部