时间戳

首页 > 解决方案 > 如何使用 HTML、CSS 或 Javascript 在用户点击移动设备时创建反应？

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

问题描述

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

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

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

在此处输入图像描述 在此示例中，用户单击时会出现灰色阴影。

有任何想法吗 ？非常感谢

标签： javascripthtmlcssruby-on-railstwitter-bootstrap

解决方案

您可以使用 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);
}

推荐阅读