onclick работает, но я также хочу визуальный эффект

#javascript #android #html

#javascript #Android #HTML

Вопрос:

В приложении для Android у меня есть tr onclick =»HitRow (это,’http://www.test.com ‘);» … переход на другой URL при щелчке по всей строке таблицы. Это работает нормально.

     function HitRow(cell,loc) 
        { 
        window.location.href = loc;
        cell.style.backgroundColor = "red";
        }
  

Однако я также хочу визуальный щелчок по строке. Я попытался установить цвет фона с помощью cell.style.backgroundColor , но это работает после того, как пользователь переместился и / или он на мгновение мигает непонятным образом.

В идеале я бы хотел, чтобы цвет менялся при касании вниз, а при касании вверх выполнялась ссылка href. Можно ли это сделать?

Спасибо

Ответ №1:

Для этого я бы использовал ненавязчивый Javascript, события касания и атрибуты данных:

Разметка:

 <tr data-url="http://www.google.com">

</tr>
  

Javascript:

 var tr = document.querySelector("tr");
tr.addEventListener("touchstart", function() {
    this.style.backgroundColor = "red";
});
tr.addEventListener("touchend", function() {
    window.location.href = this.getAttribute("data-url");
});
  

Если у вас есть несколько tr элементов, вы захотите использовать document.querySelectorAll вместо этого и перебирать их в цикле:

 var i;
var elements = document.querySelectorAll("tr[data-url]");
for(i=elements.length;i--) {
    var element = elements[i];
    element.addEventListener("touchstart", doTouchStart);
    element.addEventListener("touchend", doTouchEnd);
}

function doTouchStart() {
    this.style.backgroundColor = "red";
}

function doTouchEnd() {
    window.location.href = this.getAttribute("data-url");
}
  

Ответ №2:

Вы можете попробовать :

вместо этого :

 function HitRow(cell,loc) 
            { 
            window.location.href = loc;
            cell.style.backgroundColor = "red";
            }
  

попробуйте это :

 function HitRow(cell,loc) 
        { 
        cell.style.backgroundColor = "red";
        window.location.href = loc;

        }