addEventListener('click', function) 没有触发

Question

我确信有一个简单的解决方案，但我似乎无法弄清楚。 “点击”不想在关注按钮上触发。 此外，尝试在不使用 jQuery 的情况下执行此操作。

 var followBtn = document.getElementById("followBtn"); followBtn.addEventListener('click', followed); function followed(event) { var followPars = document.getElementsByClassName("sm-par followed"); event.preventDefault(); for(var i=0; i<followPars.length; i+=1) { followPars[i].style.display = "inline-block"; followPars[i].style.marginTop = "0px"; followPars[i].innerHTML = "Sed vel sem felis."; }; };

 <div id="main-container"> <div class="bg-img"> <img src="images/cover-banner.png" alt="Profile Banner Image"/> </div> <div class="icon-button"> <div class="icon"> <img src="images/profile-image.png" alt="Profile Logo Image"/> </div> <div class="button"> <a id="followBtn" class="btn" aria-label="Follow Us Button">Follow</a> </div> </div> <div id="main-content"> <h1>Lorem Ipsum</h1> <p>Sed ultrices sem elit. Integer gravida sapien in maximus auctor. Proin quis urna mauris. Pellentesque maximus at tellus eu ultrices. In vitae massa tincidunt, elementum nunc nec, pellentesque lectus. Aliquam placerat nisi risus, sit amet aliquet dui accumsan eu. Maecenas id urna aliquet, pellentesque ex at, gravida purus.</p> <p class="sm-par">Curabitur ac augue fringilla felis varius convallis.</p> <p class="sm-par followed"></p> </div> </div>

Answer 1

在将代码片段添加到代码中后，我找到了解决方案（感谢 Ibrahim Mahrir），它与 javascript 无关。

按钮上的样式需要包含z-index: 1; 坐在容器层的顶部以可点击。