因此,首先,我想向您展示页面内容的图像,以便您了解我在说什么:



现在,我在页面上有两个主要的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.idpurple div与其他字符区分开,

尝试这个,

$("#purple").click(function(e){
  if(e.target.id == "purple")
  {
       alert("purple clicked.!");
  }
});


DEMO

10-07 19:10
查看更多