Question

我该怎么做：

<div onclick="foo1()">
    <div onclick="foo2()"></div>
</div>

当我这样做并单击子元素时，它仍然运行foo1（）函数。如何暂时禁用父元素？

Answer 1

使用jQuery，您可以使用：http://api.jquery.com/event.stopPropagation/

Answer 2

是的，jQuery可以解决您的问题。请参阅以下代码：

<script src="jquery.js" type="text/javascript"></script>
<script>
function a()
{
    alert('parent');
}

$(document).ready(function(){
    $('#div2').click(function(e){alert('child');e.stopPropagation();})
})
</script>
<div onclick="a();" style="height:100px;width:100px;border:1px solid red">
    <div id="div2" style="height:85px;width:85px;border:1px solid green">
    </div>
</div>

Answer 3

我为您创建了一个有用的 EXAMPLE

HTML

<div id="parent">
    <div id="child"></div>
</div>

CSS（只是为了区分两个div）

#parent {
    background-color: black;
    width: 220px;
    height: 220px;
}

#child {
    position:relative;
    background-color: blue;
    width: 110px;
    height: 110px;
    top:160px;
    left:160px;
}

JavaScript（包括jQuery）

$(document).ready(function(){
    $('#child').click(function() {
        alert('Child');
        if (!e) var e = window.event;
        e.cancelBubble = true;
        if (e.stopPropagation) e.stopPropagation();
    });
    $('#parent').click(function() {
        alert('Parent');
    });
});

当你点击孩子时，只有来自孩子的行动才会被采取行动。您可以根据需要修改我的示例，以达到您的需要。

希望这适合你。

Answer 4

你可以尝试

<div onclick="foo1(event)">
    parent
    <div onclick="foo2(event)">child</div>
</div>

和

function foo1(e){
    console.log('foo1', e)
}

function foo2(e){
    e.stopPropagation();
    console.log('foo2', e)
}

演示：Fiddle

有可点击子div的父div可点击

4 个答案: