zoukankan      html  css  js  c++  java
  • 用jquery阻止事件起泡 windrainpy

    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="200px;height:200px;background:green;">

    one

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

        two

            <div class="three">

                three

            </div>

        </div>

    </div>

  • 相关阅读:
    04 数值向量和数组
    项目成功到底取决于什么?
    NBA不拘一格,花大虫入选名人堂
    [Buzz.Today]2011.08.07
    Localization in QT
    只做自行车的CAD
    [Buzz.Today]Intel开源Embree
    [Revisit SolidMCP]虎年中期回顾篇
    Google是如何设定目标并测量成功的
    VS2008: Unable to start debugging, Remote Debugging Monitor has been closed
  • 原文地址:https://www.cnblogs.com/windrainpy/p/2131651.html
Copyright © 2011-2022 走看看