触摸事件在移动设备上没有触发

Question

我正在为一个网站开发功能，用户可以点击屏幕（一个星星，旁边有一个评分），它会向后台发送一个调用，为用户的故事点赞，也会更新网页上显示的前端值。这些都是使用 "点击 "事件成功的。

在我的网站软启动后，我意识到，在触屏移动设备上，这个功能已经停止工作了。我在互联网上寻找答案，但没有找到任何明确的答案，为什么我的新的 "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是否会调用增加值。你堆叠了3次parentNode，但在你的html例子中，事件目标只有2个祖先。

所以尝试在注册变量后立即在likePost中记录postID。

你也可以尝试为文档本身的 touchstart 添加一个事件监听器，看看是否会触发。如果不会，那就是另一个潜在的问题。

Answer 2

我想 touchend 可能更接近 click 处理程序，因为你需要检测他们何时完成敲击。

另外，可以尝试添加 console.log(event) 对你的 likePost 函数来查看实际的事件是什么被触发的。可能是目标不是你所期望的。

也可以尝试添加 event.preventDefault() 到该功能，因为可能是事件在其他元素上冒泡和触发，同时也在逆转事情。