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

原文地址:https://www.cnblogs.com/xianren/p/5972684.html