.click一个子div，但不要触发点击parentDiv？

Question

我在这里有一个例子：

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

基本上，如何在Child元素上创建.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

Answer 2

您只需停止传播儿童点击次数 - http://jsfiddle.net/js5LR/3/

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