Как создать реакцию на нажатие пользователя на мобильном телефоне с помощью 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);
}