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

  • 相关阅读:
    mysql指定字符位置截取字符串(多行重复信息进行合并)
    数据库按某字段去重查询结果集做法
    poi从数据库导出百万数据并写入excel
    自定义消息弹框以及跳转
    Django使用distinct报错:DISTINCT ON fields is not supported by this database backend
    Mysql】Mysql中CURRENT_TIMESTAMP,CURRENT_DATE,CURRENT_TIME,now(),sysdate()各项值的区别
    HTML文件直接在浏览器打开和本地服务器localhost打开有什么区别?
    pip下载加速的方式
    Python字符串格式化方式之format
    chmod: changing permissions of 'xxx': Operation not permitted
  • 原文地址:https://www.cnblogs.com/xianren/p/5972684.html
Copyright © 2011-2022 走看看