用jquery阻止事件起泡

jquery使用过程中阻止事件起泡实例  

1、通过返回false来取消默认的行为并阻止事件起泡。

jQuery 代码:

$("form").bind("submit", function() { return false; })

 

2、通过使用 preventDefault() 方法只取消默认的行为。

jQuery 代码:

$("form").bind("submit", function(event){
  event.preventDefault();
});

 

3、通过使用 stopPropagation() 方法只阻止一个事件起泡。

jQuery 代码:

$("form").bind("submit", function(event){
  event.stopPropagation();
});

 

 

 

关于js事件起泡的验证

今天这个问题主要涉及到几个关键词：对象，触发事件，捕获事件，执行处理、起泡。这其实就是整个js执行的过程。其中冒泡这个过程很有意思。其实就像是一杯水，但是这杯水是分层次的，最底下是当前触发事件的对象。然后越往上范围越大，最顶层肯定是window，倒数第二层是document。气泡在上浮过程中会判断当前所到达的层有没有绑定事件处理方法。有话就执行相应的处理。没有的话就继续起泡。直到到达最顶层的window窗口层。我们可以在任何一层做相应的处理以阻止事件继续起泡。方法就是调用事件对象的阻止起泡的方法。event.stopPropagation();下面是写的一个验证js事件起泡的过程方法。

<script type="text/javascript">

    $(document).ready(function(){

        $('.one').click(function(e){

            alert('one');

        });

        $('.two').click(function(e){

            alert('two');

        });

        $('.three').click(function(e){

            alert('three');

           //阻止起泡取消下面的注释

           // e.stopPropagation();

        });

    });

</script>

<div class="one" style="width:200px;height:200px;background:green;">

one

    <div class="two" style="width:150px;height:150px;background:yellow;">

    two

        <div class="three">

            three

        </div>

    </div>

</div>