夏日博客

A-A+

js中的preventDefault与stopPropagation详解

2015年12月11日 前端设计 评论 1 条 阅读 12 views 次

这两天在使用 js 做网页事件效果，所以温习了不少的 js 基础知识，今天在使用 js 做前一步与后一步事件的时候，接解到了 preventDefault与stopPropagation 两个方法，现在对于这两个方法还不是太了解，只能GG了，想要理解，最主要的看来还是动手亲自操作了，直接进行运行，对于专业美工来说，这可能就是最基础的了，以前想要做 js 效果的时候，都是直接从网上下载的，真要是自己手动写事件，可还真是难上加难呀。

首先讲解一下js中preventDefault和stopPropagation两个方法的区别:

preventDefault方法的起什么作用呢？我们知道比如如下代码:

  1. <a href="https://www.xiariboke.net">夏日博客</a>  

这是html中最基础的东西，起的作用就是点击夏日博客链接到https://www.xiariboke.net,这是属于标签的默认行为，而preventDefault方法就是可以阻止它的默认行为的发生而发生其他的事情。看一段代码大家就明白了,代码如下:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>JS阻止链接跳转</title>  
  6. <script type="text/javascript">   
  7. function stopDefault( e ) {   
  8. if ( e && e.preventDefault )   
  9.    e.preventDefault();   
  10.     else   
  11.    window.event.returnValue = false;   
  12.   
  13.     return false;   
  14. }   
  15. </script>   
  16. </head>  
  17. <body>  
  18. <a href="https://www.xiariboke.net" id="testLink">夏日博客</a>   
  19. <script type="text/javascript">   
  20. var test = document.getElementById('testLink');   
  21. test.onclick = function(e) {   
  22.    alert('我的链接地址是：' + this.href + ', 但是我不会跳转。');   
  23.    stopDefault(e);   
  24. }   
  25. </script>  
  26. </body>  
  27. </html>  

此时点击夏日博客链接，不会打开https://www.xiariboke.net，而只是弹出一个alert对话框。

preventDefault方法讲解到这里，stopPropagation方法呢？讲stopPropagation方法之前必需先给大家讲解一下js的事件代理。

事件代理用到了两个在JavaSciprt事件中常被忽略的特性：事件冒泡以及目标元素。当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。对任何一个事件来说，其目标元素都是原始元素，在我们的这个例子中也就是按钮。目标元素它在我们的事件对象中以属性的形式出现。使用事件代理的话我们可以把事件处理器添加到一个元素上，等待事件从它的子级元素里冒泡上来，并且可以很方便地判断出这个事件是从哪个元素开始的。

stopPropagation方法就是起到阻止js事件冒泡的作用，看一段代码,代码如下:

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xHTML1/DTD/xHTML1-transitional.dtd">  
  2. <HTML XMLns="http://www.w3.org/1999/xHTML" lang="gb2312">  
  3. <head>  
  4. <title> 阻止JS事件冒泡传递（cancelBubble 、stopPropagation）</title>  
  5. <meta name="keywords" content="JS,事件冒泡,cancelBubble,stopPropagation" />  
  6. <script>  
  7. function doSomething (obj,evt) {  
  8.  alert(obj.id);  
  9.  var e=(evt)?evt:window.event;  
  10.  if (window.event) {  
  11.   e.cancelBubble=true;// ie下阻止冒泡  
  12.  } else {  
  13.   //e.preventDefault();  
  14.   e.stopPropagation();// 其它浏览器下阻止冒泡  
  15.  }  
  16. }  
  17. </script>  
  18. </head>  
  19. <body>  
  20. <div id="parent1" onclick="alert(this.id)" style="width:250px;background-color:yellow">  
  21.  <p>This is parent1 div.</p>  
  22.  <div id="child1" onclick="alert(this.id)" style="width:200px;background-color:orange">  
  23.   <p>This is child1.</p>  
  24.  </div>  
  25.  <p>This is parent1 div.</p>  
  26. </div>  
  27. <br />  
  28. <div id="parent2" onclick="alert(this.id)" style="width:250px;background-color:cyan;">  
  29.  <p>This is parent2 div.</p>  
  30.  <div id="child2" onclick="doSomething(this,event);" style="width:200px;background-color:lightblue;">  
  31.   <p>This is child2. Will bubble.</p>  
  32.  </div>  
  33.  <p>This is parent2 div.</p>  
  34. </div>  
  35. </body>  
  36. </HTML>   

大家运行一下上面的代码就明白了。

标签：

1 条留言  访客：1 条  博主：0 条

  1. APP外包开发 2019年11月18日 下午 4:28  -199楼  回复

    一曲相思 如江水与山河

给我留言