原创

解决Aplayer与a标签冲突


问题描述

最近博客使用中发现点击<a>标签跳转锚点会出现页面下移的情况,通过注释代码的方法排查到问题出现在引入的APlayer.min.js中,

通过href关键字查找在其中找到这么一行代码:

//这段代码大概意思是遍历页面所有以#开头但不包括只有#的href元素,添加点击事件
for (var e, t = document.querySelectorAll('a[href^="#"]:not([href="#"])'), i = t.length; e = t[--i];) e.addEventListener("click", n, !1)

大略一看,这不是给全页面的href增加了点击事件吗,虽然没仔细看到底是什么方法,但问题肯定就是出现在这了。

解决方法

这里我把选择器修改的更具体,把它限制在APlayer容器player里,代码:

//在选择器开头增加‘#player’,把选择范围控制在id为player的元素内
document.querySelectorAll('#player a[href^="#"]:not([href="#"])')

//也可以使用not把不想包含的元素排除
//在选择器中用:not()选择器排除我指定的元素,这里排除掉了"#myCarousel"和以"#panel-element"开头的元素
document.querySelectorAll('a[href^="#"]:not([href="#"]):not([href="#myCarousel"]):not([href^="#panel-element"])')

总结

用选择器的时候一定要具体化,避免使用这种类似全局的选择,否则经常会出现冲突,找起问题来也费劲。

正文到此结束