zoukankan      html  css  js  c++  java
  • JS阻止事件冒泡

    在使用JS事件的时候,外层元素事件有可能被里层元素的事件触发,例如点击里层元素外层也触发了点击,这种现象称为事件冒泡。(李昌辉)

    <div id="wai">
        <div id="nei"></div>
    </div>
    <script type="text/javascript">
    $(document).ready(function(e) {
        $("#wai").click(function(){
                alert("外层点击了");
            })
        $("#nei").click(function(){
                alert("里层点击了");
            })
    });

    效果如图,白色是里层元素div,蓝色是外层元素div:

    当点击白色区域是,出现两次提示,这说明里层div点击触发了,外层div的点击事件也触发了,这就出现了事件冒泡:

    阻止时间冒泡,需要写一个函数,在里层div的点击事件中调用该函数即可:

    阻止冒泡函数:

    //阻止事件冒泡函数
    function stopEventBubble(event)
    {
        var e=event || window.event;
        if (e && e.stopPropagation)
        {
            e.stopPropagation();    
        }
        else
        {
            e.cancelBubble=true;
        }
    }

    事件中调用该函数:

    $(document).ready(function(e) {
        $("#wai").click(function(){
                alert("外层点击了");
            })
        $("#nei").click(function(evt){
                alert("里层点击了");
                stopEventBubble(evt);
            })
    });

    这样就阻止了事件的冒泡,再次点击白色区域,只会弹出一次提示:

  • 相关阅读:
    datagrid
    SQL语句
    JavaScript事件
    DOM和BOM
    JavaScript基础知识
    css
    网络编程常识
    集合框架
    多线程常识
    面向对象常识
  • 原文地址:https://www.cnblogs.com/lingxin/p/5952235.html
Copyright © 2011-2022 走看看