关注前端开发微信微信号web007007

Javascript 中阻止浏览器默认操作

作者 管理员 发布时间 2012-06-02 17:24 文章分类 JavaScript 文章评论 抢沙发 阅读次数

在浏览器事件中,会触发一些默认动作,比如:点击一个链接时,执行完捕获/冒泡动作后,会触发链接的默认事件:跳转到指定链接地址。

在很多时候,我们需要改变这些默认操作,比如:点击一个链接时,我们执行一些 ajax 操作,但是我们并不希望执行跳转动作,于是,就有了本文:阻止浏览器默认操作。

其实这并不是一个非常难的课题,单独拿出来的原因还是浏览器兼容问题:


function stopDefault( e ) {
if ( e && e.preventDefault )
e.preventDefault();
else
window.event.returnValue = false;
return false;
}

实例如下:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS阻止链接跳转</title>
</head>
<body>
<a href="http://www.google.com" id="testLink">Google</a>
<script type="text/javascript">
var test = document.getElementById('testLink');
test.onclick = function(e) {
alert('我的链接地址是:' + this.href + ', 但是我不会跳转。');
stopDefault(e);
}
</script>
</body>
</html>

本文固定链接: http://www.web92.net/200.html | WEB前端开发

该日志由 于2012年06月02日发表在 JavaScript 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: Javascript 中阻止浏览器默认操作 | WEB前端开发