炫意html5
最早CSS3和HTML5移动技术网站之一

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

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

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

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

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

上面列表的html代码如下:

<style>
.link-item{cursor: pointer; background: #ccc; padding: 30px 0; margin: 10px 0; list-style: none;}
</style>
<ul>
<li>
<a href="http://www.xyhtml5.com2120.html" target="_blank">Docker LNMP环境搭建</a>
</li>
<li>
<a href="http://www.xyhtml5.com128.html" target="_blank">手把手编写PHP MVC框架实例教程</a>
</li>
<li>
<a href="https://www.xyhtml5.com873.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");
})
});

具体远离请看注释。

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

Java基础教程Android基础教程