Question

首先，我想向您展示我的页面内容的图像，以便您了解我在说什么：

enter image description here

现在，我在页面上有两个主要的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>

我明白通过这段代码，我将设法点击紫色区域并获得警报火，问题是当我点击红色区域时，此警报也会被触发 - 这不是我想要的！ !!

所以，最后，如果你还没有放弃阅读这篇文章，那就是问题：

如何避免点击红色区域时出现“紫色事件”???

P.S。我必须让紫色的div像 - 这不能改变

宽度：100％;高度：100％

提前致谢

Answer 1

没有直接的方法来阻止bubbling down。您必须使用event.target.id来区分purple div与其他人，

试试这个，

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

DEMO

Answer 2

注意：刚刚意识到你的紫色div没有封装红色/绿色div。在这种情况下，这个答案不会解决您的问题。它依赖于嵌套的div结构，如下面的包含示例所示。我会留下这个答案，以防其他人遇到类似的问题。 Maksym Stepanenko's answer below regarding z-index是最正确的。

事件对象有两个属性：currentTarget和target。

currentTarget是事件冒泡阶段的当前元素。
target是负责发起活动的元素。

在purple点击事件处理程序中，您可以测试该元素是否是事件链中的目标：

$('#purple').click(function(e) {
    if ( e.currentTarget == e.target ) {
        console.log('clicked purple',Date.now());
    }
});
$('#red').click(function(e) {
    console.log('clicked red',Date.now());
});

这在以下情况下很有用：

您不希望将事件定相仅限于红色对象
您不想记得将e.stopPropagation放在每个点击处理程序中，其元素是#red / #purple

这是一个完整的工作示例：

<!doctype html>
<html>
    <head>
        <title>Bubble Test</title>
        <style type="text/css">
            #purple {border:3px solid #3c1e40;background:#b459bf;}
            #red {margin:auto;width:958px;border:3px solid #400Aa0a;background:#ff2829;}
            .green {margin:20px;padding:30px;border:3px solid #1c401c;background:#54bf55;}
        </style>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#purple').click(function(e) {
                    if ( e.currentTarget == e.target ) {
                        console.log('clicked purple',Date.now());
                    }
                });
                $('#red').click(function(e) {
                    console.log('clicked red',Date.now());
                });
            });
        </script>
    </head>
    <body>
        <div id="purple">
            <div id="red">
                <p class="green">Hello World</p>
                <p class="green">Lorem ipsum dolor sit amet.</p>
            </div>
        </div>
    </body>
</html>

您可以更进一步，并补偿#red：

$('#purple').click(function(e) {
    if ( e.currentTarget == e.target ) {
        console.log('clicked purple',Date.now());
    }
});
$('#red').click(function(e) {
    if ( e.currentTarget == e.target ) {
        console.log('clicked red',Date.now());
    }
});
$('.green').click(function(e) {
    console.log($(this).text(),Date.now());
});

Answer 3

这可以解决您的问题：

<强> CSS

#wrapper
{
    z-index:1;
    margin: 0 -50px;
    left:50%;
    position:absolute;
}

Fiddle

你遇到问题，因为你的紫色div覆盖了红色的div，原因是：

z-index仅适用于定位元素（位置：绝对， position：relative，或position：fixed）。

你应该阅读更多关于Z-index

的信息

如何使用css / js / anything使div中的特定区域可单击

3 个答案:

DEMO