Javascript 如何停止jquery中的事件冒泡。_Javascript

Javascript 如何停止jquery中的事件冒泡。

javascript

Javascript 如何停止jquery中的事件冒泡。,javascript,Javascript,我正在创建一个有背景的模态，就像推特引导一样。当我点击背景模式时，应该隐藏正常工作的模式。但当我点击om模式时，它会自动消失，这是不应该发生的。请帮忙 HTML <body id="wholepage"> <div id="maincontent"> <div id="innercontent"> <button class="modals" data-id="large">

我正在创建一个有背景的模态，就像推特引导一样。当我点击背景模式时，应该隐藏正常工作的模式。但当我点击om模式时，它会自动消失，这是不应该发生的。请帮忙

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>


大模态
...

jQuery调用带有

事件的your click函数

参数，您可以在其中调用它的

stopPropagation

方法，以防止它在DOM树中“冒泡”

$(".pagecontent").click(function(event){
    event.stopPropagation();
});

之所以会发生这种情况，是因为

modal

是覆盖的子元素，您可以在单击时隐藏它的父元素（

.overpage

），这样它也会隐藏modal。一个解决方案是：

$（文档）.ready（函数（）{
//单击.modals时
$（“.modals”）。单击（函数（）{
//。应显示上述页面
$（“.overpage”）.show（）；
$（“.pagecontent”）.show（'slow'）；
});
$（“.overpage”）。单击（函数（）{
$（“.pagecontent”）.hide（）；
$（this.hide（）；
});
});
#主要内容{
高度：60px；
}
#内部内容{
高度：40px；
利润率：10px；
}
.情态动词{
高度：40px；
背景色：#6596EE；
边框：实心1px#3B7EF7；
边界半径：3px；
}
.情态动词a{
文字装饰：无；
字体大小：粗体；
字体：16px arial；
颜色：白色；
}
.情态动词：悬停{
背景#122A55；
}
.上页{
位置：固定；
左：0；
排名：0；
右：0；
底部：0；
背景色：#3d3c；
不透明度：0.6；
显示：无；
}
.网页内容{
高度：100px；
边缘顶部：52px；
边缘底部：30px；
显示：无；
}
.大{
宽度：900px；
左边距：230像素；
右边距：222px；
}
.小{
宽度：250px；
左边距：511px；
边界半径：3px；
}
.元素{
高度：100px；
背景色：白色；
盒影：3px 3px 8px 3px#030303；
位置：相对位置；
顶部：0px；
左：0px；
边框：实心1px#1D1B1B；
边界半径：5px；
}
.上{
高度：50px；
边框底部：实心1px#D3C8C8；
}
.下{
高度：50px；
}
.uppercontent{
高度：25px；
填充顶部：15px；
左侧填充：14px；
右侧填充：9px；
字体大小：粗体；
字体：18px arial；
}
.低含量{
高度：25px；
填充顶部：15px；
左侧填充：14px；
}
#关闭按钮{
浮动：对；
}
#关闭按钮a{
文字装饰：无；
颜色：#C4BBBB；
字体大小：粗体；
字号：18px；
}
#关闭按钮a：悬停{
颜色：#333232；
}

大模态
...
@snehichachal抱歉，我不太明白这个问题。这就是您想要的吗？打开JSFIDLE链接，单击大模式按钮。然后单击模态内部的任何位置。它不应该隐藏。@snehichal将其添加到代码中，它就会工作：）
$(".pagecontent").click(function(event){
    event.stopPropagation();
});