html - 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>

这篇关于html - a标签里面嵌套一个a标签，点击子链接标签时，同时触发了父标签a的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！