a标签里面嵌套一个a标签，点击子链接标签时，同时触发了父标签a

<a href="baidu.com">
    <div>
        <div class="title">百度</div>
        <div class="content">百度是全球最大的中文搜索引擎...
            <span onclick="location.href='readmore.html'" href="X.html" target="_blank">Read More</span>
        </div>
    </div>
</a>

如上例子，当点击Read More时，会新建窗口打开Read More指向的网页，同时原窗口打开了baidu.com，如何使点击Read More时候，不触发父级a标签？？

---

A标签是不能嵌套A标签的，这样写直接违反了标准，会造成未知问题，正确的改进代码：

        <a href="baidu.com">
            <div>
                <div class="title">百度</div>
                <div class="content">百度是全球最大的中文搜索引擎...
                    <span href="X.html" target="_blank" id="readmore">Read More</span>
                </div>
            </div>
        </a>
        <script>
            document.getElementById("readmore").addEventListener("click",function(e){
                e.preventDefault();
                //接下来使用js代码进行页面跳转
            });
            
        </script>

---

// with jQuery
$(function() {
    $(".content").on("click", "a", function(e) {
        e.stopPropagation();
        // 不能 return false;
        // 因为 return false 表示两个动作
        //    e.stopPropagation();
        //    e.preventDefault();  // 这个会让点了 a 不跳转
    });
});