移动设备上未触发触摸事件

Question

我正在开发一个网站的功能，在那里用户可以点击屏幕(一个星级旁边的评级)，它将发送一个呼叫到后端，喜欢用户的故事，也更新了在网页上显示的前端值。使用“click”事件，所有这些都是成功的。

在软启动我的网站后，我意识到使用触摸屏移动设备时，此功能已停止工作。我在互联网上寻找答案，但没有找到任何非常清楚的原因，为什么我的新“touchstart”在移动设备上不起作用。这是我的客户端javascript：

//HANDLER FUNCTIONS FOR EVENT/////////////////////////
const increaseValue = (postID) => {
    let ratingValue = parseInt(
        document.getElementById(`${postID}--rating`).innerHTML
    );
    // UPDATES RATING VALUE ON THE FRONT END
    ratingValue += 1;
    document.getElementById(`${postID}--rating`).innerHTML = ratingValue;
};

const likePost = (event) => {
    // EVENT DELEGATION
    let postID = event.target.parentNode.parentNode.parentNode.id;
    if (postID) {
        increaseValue(postID);
        // SENDS TO EXPRESS ROUTE TO UPDATE RATING IN DATABASE
        increaseRating(postID); //imported function to route to backend
    }
};

// EVENT LISTENERS //////////////////////////////////
// Increase Posts Rating EVENT HANDLER for Home Page
if (document.querySelector('.event-delegation-1')) {
    document
        .querySelector('.event-delegation-1')
        .addEventListener('touchstart', likePost, false);
    document
        .querySelector('.event-delegation-1')
        .addEventListener('click', likePost, false);
} else {
    console.log('kaw');
}

以下是HTML的一段代码：

 <!-- Main Content -->
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-md-10 mx-auto event-delegation-1">
          <% for (var i = 0; i < blogposts.length; i++) { -%>
          <div class="post-preview" id="<%=blogposts[i]._id%>">
            <a href="/posts/<%= blogposts[i]._id %>">
              <h2 class="post-title">
                <%= blogposts[i].title %>
              </h2>
              <h3 class="post-subtitle">
                <%- limitStory(blogposts[i].body) %>
              </h3>
            </a>
            <p class="post-meta">
              Posted by
              <a href="/users/profile/<%=blogposts[i].userid.username%>"
                ><%= blogposts[i].userid.username %>,
                <%=blogposts[i].userid.role %></a
              >
              <%= blogposts[i].datePosted.toDateString() %>
            </p>
            <div class="rating-system d-inline-flex align-items-center">
              <!--  <a href="#"> -->
              <svg
                id="<%=blogposts[i].title%>--star"
                class="bi bi-star-fill"
                width="1em"
                height="1em"
                viewBox="0 0 16 16"
                fill="currentColor"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
                />
              </svg>
              <!--   </a> -->
              <div
                class="rating-system__blog-score ml-2"
                id="<%=blogposts[i]._id%>--rating"
              >
                <%= blogposts[i].rating %>
              </div>
            </div>
          </div>
          <hr />
          ...

任何关于这个话题的建议都将受到欢迎。我相信这与事件的听众有关，但我不能弄清楚这一情况。

Answer 1

查看您提供的代码，无法知道likePost是否会调用increaseValue。您堆叠了3次parentNode，但在您的html示例中，事件目标只有2个祖先。

因此，在注册变量之后，请立即尝试在likePost中记录postID。

您还可以尝试在文档本身上添加一个touchstart的eventlistener，看看是否会触发。如果不是这样，您就有另一个潜在的问题。

Answer 2

我认为touchend可能更接近click处理程序，因为您需要检测它们何时完成点击。

另外，尝试将console.log(event)添加到您的likePost函数中，以查看正在触发的实际事件。可能目标并不是您所期望的。

还要尝试将event.preventDefault()添加到该函数中，因为事件可能正在冒泡并在其他元素上触发，同时还会反转。