zoukankan      html  css  js  c++  java
  • javascript阻止事件冒泡和浏览器的默认行为

    在使用javascript编程时会遇到一个问题,就是当你给html添加事件时,由于浏览器默认的冒泡事件触发机制,所以会触发你不想触发的事件,那么通过如下的函数可以解决这个问题(兼容IE和FF)。

    1、阻止事件冒泡,使其成为捕获型事件触发机制

      function stopBubble(e){

        if(e && e.stopPropagation){    //非IE

          e.stopPropagation();

        }else{

          window.event.cancelBubble = ture;    //IE方式取消事件冒泡

        }

      }

       比如:

          <head>
                               <title></title>
                <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
            </head>
          <body>
                <table>
                      <tr>
                           <td><span>冒泡事件测试</span></td>
                      </tr>
                </table>

             <script type="text/javascript">
                     $(function () {
                           $("table").click(function () { alert("table alert"); });
                           $("td").click(function () { alert("td alert"); });
                           $("span").click(function (){
                                    alert("span alert");

                       //e.stopPropagation();
                           });
                     });
               </script>
          </body>

          这时候我们会看到这样的情况:span alert -> td alert -> table alert三个元素绑定的事件依次触发。这就叫事件冒泡。就是从下到上,从里到外,事件依次触发。要想阻止阻止事件冒泡只需在该函数中添加 e.stopPropagation 方法。

    2、阻止默认行为、取消默认动作

      function stopDefault(){

        if(e && e.preventDefault){    //非IE

          e.preventDefault();

        }else{    //IE

          window.event.returnValue = false;

        }

      }

    附:  return false等效于同时调用e.preventDefault()和e.stopPropagation();

  • 相关阅读:
    机器学习算法(SVM)公开课4月25日开讲
    手把手教你做文本挖掘
    ActiveReports公开课开启报名,学习如何解决中国式复杂报表难题
    DevExpress免费公开课,讲解即将发布的16.2新版功能
    Stimulsoft入门视频
    免费公开课,讲解强大的文档集成组件Aspose,现在可报名
    中国式商业智能报表ActiveReports免费公开课,10月20日开讲
    JavaScript图表FusionCharts免费在线公开课,由印度原厂技术工程师主讲,10月13日发车
    LoadRunner免费公开课,惠普金牌讲师亲授
    DevExpress VCL v16.1.3发布
  • 原文地址:https://www.cnblogs.com/xianren/p/5972684.html
Copyright © 2011-2022 走看看