javascript - onclick 有效，但我也想要视觉效果

Question

在 Android 应用程序中，我有一个 tr onclick="HitRow(this,' http://www.test.com ');"...单击整个表行时转到另一个 url。这工作得很好。

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

但是我还想要对该行进行可视化单击。我尝试使用 cell.style.backgroundColor 设置背景颜色，但这在用户导航离开和/或它暂时以令人困惑的方式闪烁后起作用。

我理想地想要的是在触地时改变颜色，并在触地时改变要执行的 href。这可以吗？

谢谢

Answer 1

我会使用不显眼的Javascript，touch events和 data attributes为此:

标记:

<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");
}