如何使用 HTML、CSS 或 Javascript 在用户点击移动设备时创建反应？

Question

我有一个网站，完全响应（使用 Bootstrap 制作）并在 Cordova 的移动应用程序中可用。

在移动设备中，用户所做的操作并不是真正“动态”的：当用户“点击（移动点击）”时，用户看不到他的操作是否完成。他们必须等待加载时间结束才能查看他们的“点击”是否有效。

我在寻找什么：每次“点击”的动态行为，例如出现一个圆圈，以向用户显示他的点击有效：

在此示例中，用户单击时会出现灰色阴影。

有什么想法吗？ 非常感谢

Answer 1

您可以使用 JavaScript 来实现。首先，使用 HTML 和 CSS 创建加载动画并将其隐藏。

加载页面后，使用document.getElementsByTagName()或document.querySelectorAll()选择所有链接和按钮

现在创建一个函数来显示或隐藏加载动画。然后循环遍历元素并向它们添加点击事件监听器。

HTML：

<div id="loading" style="display:none">Loading...Please Wait</div>

JS：

var loading = document.getElementById("loading");
var elements = document.querySelectorAll("a");

function showLoading(){
    loading.style.display = "block";
}

for(var i = 0; i < elements.length; i++){
    elements[i].addEventListener("click",showLoading);
}