如何避免Javascript嵌套链接块点击时同时打开父子链接?

有如下一个列表，我们希望当

• 点击链接当时候，跳转到链接的地址
• 点击其上级灰色方框到时候，跳转到灰色方框指定到地址。

这里容易出现一个问题：我们点击内部的链接时，会同时打开灰色方框的链接

下面我们来解决这个问题。

上面列表的html代码如下：

<style>
    .link-item{cursor: pointer; background: #ccc; padding: 30px 0; margin: 10px 0; list-style: none;}
</style>
<ul>
    <li class="link-item" data-href="http://garymeng.com">
        <a href="http://garymeng.com/2120.html" target="_blank">Docker LNMP环境搭建</a>
    </li>
    <li class="link-item" data-href="http://garymeng.com">
        <a href="http://garymeng.com/128.html" target="_blank">手把手编写PHP MVC框架实例教程</a>
    </li>
    <li class="link-item" data-href="http://garymeng.com">
        <a href="http://garymeng.com/873.html" target="_blank">MVC架构的职责划分原则</a>
    </li>
</ul>

父类的方框地址用data-href指定。

实现我们要求的代码如下：

var items = document.getElementsByClassName("link-item");

Array.from(items).forEach(function (element) {

    // 阻止下级a元素点击时响应本元素点击事件
    var a = element.getElementsByTagName("a");
    Array.from(a).forEach(function (element) {
        element.addEventListener('click', function (e) {
            // 阻止冒泡
            e.stopPropagation();
        })
    });

    // 本元素点击时跳转
    element.addEventListener('click', function (e) {
        window.open(this.dataset.href, "_blank");
    })
});

具体远离请看注释。