首页 - 文章 - Javascript - Javascript小技巧

Javascript 中阻止浏览器默认操作

作者: CodeBit.cn     来源: Pro JavaScript Techniques     时间: 2009-01-09 10:30:23
摘要: 在浏览器事件中，会触发一些默认动作，比如：点击一个链接时，执行完捕获／冒泡动作后，会触发链接的默认事件：跳转到指定链接地址。

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

关键词: returnValue, javascript, event, 事件, preventDefault,


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

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

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

Javascript:
  1.  
  2.  
  3. <script type="text/javascript"> 
  4.  
  5. // 说明：Javascript 中阻止浏览器默认操作 
  6. // 作者：John Resig 
  7. // 来源：CodeBit.cn ( http://www.CodeBit.cn ) 
  8.  
  9. function stopDefault( e ) { 
  10.     // Prevent the default browser action (W3C) 
  11.     if ( e && e.preventDefault ) 
  12.         e.preventDefault(); 
  13.     // A shortcut for stoping the browser action in IE 
  14.     else 
  15.         window.event.returnValue = false; 
  16.     return false; 
  17. } 
  18. </script> 
  19.  
  20.  


使用示例：

HTML:
  1.  
  2.  
  3. <a href="http://www.google.com" id="testLink">Google</a> 
  4.  
  5. <script type="text/javascript"> 
  6. var test = document.getElementById('testLink'); 
  7. test.onclick = function(e) { 
  8.     alert('我的链接地址是：' + this.href + ', 但是我不会跳转。'); 
  9.     stopDefault(e); 
  10. } 
  11. </script> 
  12.  
  13.  



相关文章
发表评论 有想法？点此发表评论？
推荐链接：(联系 QQ ：326801485)