Question

当我单击p时，什么也没有发生，但是当我单击div的任何其他部分时，它都可以正常工作。我不知道为什么会这样。请帮帮我。

tsc

我使用的CSS：

<%- include('./partials/header');-%>
<%- include('./partials/flash');-%>
<% posts.forEach(function(post){ %>
<a href="/post/<%= post._id %>" id="posta">
<div id="post">
<h3 class="text-dark" id="title"><%- post.Title %></h3>
<p class="text-secondary" id="date"><small><%=post.Author.name %><br>
<%=post._id.getTimestamp().toLocaleDateString()%></small></p>
<p class="h6 text-dark" id="Postcontent"><%- post.Content.substring(0,200)+"..." %><span class="h6 text-success">Read more</span>
</p>
</div>
</a>
<span id="border"></span>
<% }) %>
<%- include('./partials/footer');-%>

更新：很奇怪，但是我观察到的是，当我单击第一个项目的p时，它不起作用，但对于所有其他项目，它都起作用。

链接到网站： https://enlightening-blog.herokuapp.com/

Answer 1

根据您的代码。问题在于您编写js代码的方式。问题不在问题中提到的其他地方（由于链接）。您犯的错误是菜鸟错误之一（切勿将static id放入循环中）。这些ID是相同的。基于js的工作方式，它会查找唯一的ID，但重复的类可能很好。所以您当前的代码是

document.getElementById("Postcontent").addEventListener("click", function(event){
  event.preventDefault();
  });

将 Postcontent 从id更改为class并添加以下代码

var postcontent = document.querySelectorAll(".Postcontent");
postcontent.addEventListener('click', function(event){
   event.preventDefault();
});

Answer 2

@ rajesh-paudel提到了一个小错误，但很重要。

 Never user static ids in loops.

此代码违反标准，因此不正确。它将通过验证检查，并且应该失败。

ID必须是唯一的。在这里阅读：HTML 4.x Specification 为HTML 5

When specified on HTML elements, the id attribute value must be 
unique amongst all the IDs in the element's tree and must contain at 
least one character. The value must not contain any ASCII whitespace.

锚标签无法正常表达

2 个答案: