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

  • 相关阅读:
    约束性组件和非约束性组件
    react事件中的事件对象和常见事件
    react事件中的this指向
    【Java】操作数据库
    【设计思想】MVC模式
    【设计思想】面向对象
    【Java】(机考常用)类集
    【Java】机考常用操作
    【数据库】三级模式、二级映射
    【软件测试】圈复杂度
  • 原文地址:https://www.cnblogs.com/xianren/p/5972684.html
Copyright © 2020-2023  润新知