点击内部链接时如何阻止外层.wrap容器触发click事件

HTML #

<div class='wrap'>
    <a class='inner-link' href="#">Link</a>
</div>

CSS #

.wrap
{
  background:#CDD4E0;
  width:300px;
  height:100px;
  padding:20px;
}

.wrap:hover
{
  background:#868B93;
}

初始jQuery代码 #

$('.wrap').click(function () {
    alert("Handler for wrap container click.");
});

$('.inner-link').click(function () {
    alert("Handler for inner link click");
});

需求为点击容器内部的链接时，阻止class为.wrap的容器绑定的click事件触发。
当前代码存在的问题：触发$('.inner-link').click事件时，会同时触发$('.wrap').click事件。

这是DOM的事件冒泡机制导致的：子元素触发事件后，事件会沿DOM树向上逐层传播，依次触发所有祖先元素绑定的同类型事件，因此点击内部链接时，click事件会冒泡到外层.wrap元素，触发父容器绑定的点击回调。

在.inner-link的点击事件回调中，调用事件对象的stopPropagation()方法阻断事件冒泡即可，修改后的jQuery代码如下：

$('.wrap').click(function () {
    alert("Handler for wrap container click.");
});

$('.inner-link').click(function (e) {
    // 阻止事件向上冒泡，避免触发父容器的点击事件
    e.stopPropagation();
    alert("Handler for inner link click");
    // 如果需要同时屏蔽a标签默认的跳转行为，可追加下面这行代码
    // e.preventDefault();
});

如果不想修改子元素的事件逻辑，也可以在父容器的事件回调中判断事件源，过滤掉子元素触发的事件：

$('.wrap').click(function (e) {
    // 判断触发事件的元素是内部链接时，直接终止逻辑执行
    if ($(e.target).hasClass('inner-link')) return;
    alert("Handler for wrap container click.");
});

$('.inner-link').click(function () {
    alert("Handler for inner link click");
});

内容的提问来源于stack exchange，提问作者Steven Sann