如何停止事件冒泡在jQuery中。

SNEHI CHANCHAL 发表于 Dev

香奈儿·CHANCHAL

我正在创建一个带有Twitter引导程序的背景模态。当我单击背景模态时，应该隐藏可以正常工作的模版。但是当我单击om模态时，它会自动消失，这不应该发生。请帮忙。

//when button is clicked open modal
                $(".modals").click(function(){
                    //.abovepage should appear
                    $(".abovepage").show();
                    $(".pagecontent").show('slow');
                });
// When backdrop is clicked close modal
                $(".abovepage").click(function(){
                    $(this).hide();
                });

的HTML

<body id="wholepage">
        <div id="maincontent">
            <div id="innercontent">
                <button class="modals" data-id="large"><a href="#">Large Modal</a></button>
                <button class="modals" data-id="small"><a href="#">Small Modal</a></button>

            </div>
        </div>
        <div class="abovepage">
            <div class="pagecontent large">
                <div class="element" data-clicked="no">
                    <div class="upper">
                        <div class="uppercontent"data="modal" >
                            Large Modal 

                        <span id="closebutton"><a href="#">x</a></span>
                        </div>
                    </div>
                    <div class="lower">
                        <div class="lowercontent">
                        ...
                        </div>
                    </div>
                </div>
            </div>
        </div>
</body>

亚历克斯·查尔

发生这种情况是因为它modal是overlay的子元素，并且.abovepage在单击时隐藏了它的父元素（），所以它也隐藏了模式。一种解决方案是：

$(document).ready(function () {
    //when .modals is clicked 
    $(".modals").click(function () {
        //.abovepage should appear
        $(".abovepage").show();
        $(".pagecontent").show('slow');
    });
    $(".abovepage").click(function () {
        $(".pagecontent").hide();
        $(this).hide();
    });
});

#maincontent {
    height:60px;
}
#innercontent {
    height:40px;
    margin:10px;
}
.modals {
    height:40px;
    background-color: #6596EE;
    border:solid 1px #3B7EF7;
    border-radius: 3px;
}
.modals a {
    text-decoration: none;
    font-weight: bold;
    font:16px arial;
    color: white;
}
.modals:hover {
    background: #122A55;
}
.abovepage {
    position:fixed;
    left:0;
    top:0;
    right:0;
    bottom:0;
    background-color: #3D3C3C;
    opacity: 0.6;
    display:none;
}
.pagecontent {
    height:100px;
    margin-top: 52px;
    margin-bottom: 30px;
    display:none;
}
.large {
    width:900px;
    margin-left: 230px;
    margin-right: 222px;
}
.small {
    width:250px;
    margin-left: 511px;
    border-radius: 3px;
}
.element {
    height:100px;
    background-color: white;
    box-shadow:3px 3px 8px 3px #030303;
    position:relative;
    top:0px;
    left:0px;
    border:solid 1px #1D1B1B;
    border-radius: 5px;
}
.upper {
    height:50px;
    border-bottom: solid 1px #D3C8C8;
}
.lower {
    height:50px;
}
.uppercontent {
    height:25px;
    padding-top: 15px;
    padding-left: 14px;
    padding-right: 9px;
    font-weight:bold;
    font:18px arial;
}
.lowercontent {
    height:25px;
    padding-top: 15px;
    padding-left: 14px;
}
#closebutton {
    float:right;
}
#closebutton a {
    text-decoration:none;
    color:#C4BBBB;
    font-weight: bold;
    font-size:18px;
}
#closebutton a:hover {
    color:#333232;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="wholepage">
    <div id="maincontent">
        <div id="innercontent">
            <button class="modals" data-id="large"><a href="#">Large Modal</a>
            </button>
            <button class="modals" data-id="small"><a href="#">Small Modal</a>
            </button>
        </div>
    </div>
    <div class="abovepage"></div> <!-- here close div -->
        <div class="pagecontent large">
            <div class="element" data-clicked="no">
                <div class="upper">
                    <div class="uppercontent" data="modal">Large Modal	<span id="closebutton"><a href="#">x</a></span>

                    </div>
                </div>
                <div class="lower">
                    <div class="lowercontent">...</div>
                </div>
            </div>
        </div>