javascript - .click 子div 但不触发单击parent Div？

Question

我这里有一个例子:

http://jsfiddle.net/js5LR/1/

基本上，我怎样才能在子元素而不是父元素上有 .click 事件？

因此单击内部 div 不应触发父 div 的 .click 事件。

CSS:

.parentDiv {
    width: 200px;
    height: 200px;
    border: 1px solid red;
}
.childDiv {
    border: 1px solid blue;
}

HTML:

<div id="parent" class="parentDiv">
    <div id="child" class="childDiv">Click Me</div>
</div>

Javascript/jQuery

$('#parent').click(function() {
    alert('You clicked the parent!');
}
);
$('#child').click(function() {
    alert('You clicked the child!');
}
);

谢谢!

Answer 1

使用.stopPropagation():

$('#child').click(function (e) {
    e.stopPropagation();
    alert('You clicked the child!');
});

jsFiddle example

您的点击事件使 DOM 冒泡，并且 .stopPropagation()将阻止这种情况。

你也可以只返回 false:

$('#child').click(function () {
    alert('You clicked the child!');
    return false;
});

jsFiddle example