Question

我正在为一个网站开发功能，用户可以单击该屏幕（旁边是带有星级的星标），它将向后端发送呼叫，以类似用户的故事，并更新显示在前端的前端值。网页。使用“点击”事件已成功完成所有操作。

在软启动我的网站后，我意识到对于触摸屏移动设备，此功能已失效。我曾在互联网上搜寻答案，但对于为什么我的新“ touchstart”无法在移动设备上运行的原因，还没有任何清楚的答案。这是我的客户端javascript：

asset_iterator = security_client.list_assets(org_name)
asset_fetch_all=list(asset_iterator)

以下是HTML的摘要：

//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');
}

任何有关此主题的建议都将受到欢迎。我相信这与事件侦听器有关，但我无法做出决定。

Answer 1

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

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

您还可以尝试在文档本身上为触摸启动添加一个事件侦听器，以查看是否会触发该事件。如果不是这样，您还有另一个潜在的问题。

Answer 2

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

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

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

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

2 个答案: