我正在为一个网站开发功能,用户可以单击该屏幕(旁边是带有星级的星标),它将向后端发送呼叫,以类似用户的故事,并更新显示在前端的前端值。网页。使用“点击”事件已成功完成所有操作。
在软启动我的网站后,我意识到对于触摸屏移动设备,此功能已失效。我曾在互联网上搜寻答案,但对于为什么我的新“ 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');
}
任何有关此主题的建议都将受到欢迎。我相信这与事件侦听器有关,但我无法做出决定。
答案 0 :(得分:0)
看您提供的代码,无法知道likePost是否会调用递增值。您要堆叠3次parentNode,但在您的html示例中,事件目标只有2个祖先。
因此,尝试在注册变量后立即在likePost中记录postID。
您还可以尝试在文档本身上为触摸启动添加一个事件侦听器,以查看是否会触发该事件。如果不是这样,您还有另一个潜在的问题。
答案 1 :(得分:0)
我认为touchend
可能更接近click
处理程序,因为您需要检测它们何时完成点击。
此外,尝试将console.log(event)
添加到likePost
函数中,以查看实际触发了什么事件。可能目标不是您期望的。
还尝试在该函数中添加event.preventDefault()
,因为可能是事件在其他元素上冒泡并触发,同时又使事物反转。