因此,首先,我想向您展示页面内容的图像,以便您了解我在说什么:
现在,我在页面上有两个主要的div:包装器(红色的)和紫色的:
<div id="purple" style="position:fixed; z-index:0; left:0; top:0; width:100%; height:100%; filter:alpha(opacity=50); opacity:0.5; cursor:pointer;" onclick="javascript:alert('purple clicked');"></div>
<div id="wrapper"></div>
包装器包含许多控件和其他div,紫色基本上应该是可单击的并执行某些事件,例如
alert('purple clicked');
事实是,当我按下包装纸时,它也会触发紫色事件。
所以我要做的是添加以下代码:
<script type="text/javascript">
$("#purple").click(function (e)
{
window.event.cancelBubble = true;
e.stopPropagation();
})
</script>
我知道通过此代码,我将设法单击紫色区域并触发警报,问题是当我在红色区域内单击时,也会触发警报-这不是我想要的!
因此,最终,如果您还没有放弃阅读这篇文章,那么这里的问题是:
单击红色区域时如何避免发生“紫色事件” ???
ps。
我必须有紫色的div-不能更改
宽度:100%;高度:100%
提前致谢
最佳答案
没有直接的方法可以防止bubbling down
。您必须使用event.target.id
将purple div
与其他字符区分开,
尝试这个,
$("#purple").click(function(e){
if(e.target.id == "purple")
{
alert("purple clicked.!");
}
});
DEMO