首页 > Web开发 > 详细

jQuery时间冒泡

时间:2015-09-16 18:03:55      阅读:117      评论:0      收藏:0      [点我收藏+]

事件冒泡: 当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发。这 一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到DOM树的最上层。就是当设定了多个div的嵌套时;即建立了父子关系,当父div与子div共同加入了onclick事件时,当触发了子div的onclick事件后,子div进行相应的js操作。但是父div的onclick事件同样会被触发。这就造成了事件的多层并发,导致了页面混乱。这就是冒泡事件。

阻止JavaScript事件冒泡传递的方法:

1.event.stopPropagation();

 $(document).ready(function(){
     $(‘div‘).click(function(event){
        alert(‘div‘);
     });
     $(‘p‘).click(function(event){
        alert(‘p‘);
     });
     $(‘span‘).click(function(event){
        alert(‘span‘);
        event.stopPropagation();
     })
 });

<div>Div Element
  <p>Paragraph Element<br/>
    <span>Span Element</span>
  </p>
</div>

 

2.return(false);

$(document).ready(function(){
    $(‘div‘).click(function(event){
        alert(‘div‘);
    });
    $(‘p‘).click(function(event){
        alert(‘p‘);
    });
    $(‘span‘).click(function(event){
        alert(‘span‘);
        return(false);
    })
});

<div>Div Element
    <p>Paragraph Element<br/>
        <span>Span Element</span>
    </p>
</div>

区别:return false 不仅阻止了事件往上冒泡,而且阻止了事件本身。event.stopPropagation() 则只阻止事件往上冒泡,不阻止事件本身。

 

jQuery时间冒泡

原文:http://www.cnblogs.com/qdmaomao/p/4813844.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!