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();

  • 相关阅读:
    字符串的长度 -- js
    导入drupal中文语言包
    ubuntu修改iP地址
    人生需要苦难和敌人
    Drupal.theme未解之谜
    如何定义带下标的js数组
    smtp admin email 似乎可以考虑在
    js中的apply 和 call
    js 点号 中括号
    代码调试
  • 原文地址:https://www.cnblogs.com/xianren/p/5972684.html
Copyright © 2011-2022 走看看