jquery - 在 iPhone 中使用 Jquery 更改背景颜色的延迟

Question

我有以下代码在单击时更改链接的背景颜色。

function showSelectEffect(obj) {
        $(obj).css("background-color", "#d7d7d7");
            }

该方法称为链接的onclick，如下所示

<a onclick="showSelectEffect(this);" href="test.html">sample text</a>

问题是突出显示在延迟几秒钟后发生，并且在单击时不会立即发生。我尝试在 onmousedown 事件上调用 showSelectEffect 函数，但它仍然相同。请让我知道如何提高性能。

Answer 1

<a class="showSelectEffect" href="test.html">sample text1</a>
<a class="showSelectEffect" href="test.html">sample text2</a>
<a class="showSelectEffect" href="test.html">sample text3</a>
<a class="showSelectEffect" href="test.html">sample text4</a>​


$('.showSelectEffect').on('click',function(){
  event.preventDefault();
  $(this).css("background-color", "#d7d7d7");
});​

在此处尝试演示

您可以尝试使用 css 而不是使用 jquery，这会更快一些。

a:active {
   background-color:#d7d7d7; //this line should go in your stylesheet
}

尽量保持 JS 代码和 HTML 分开。这是一个很好的做法。

另一种选择是在样式表中定义 css 类，如下所示。

a.showSelectEffectColor {
   background-color:#d7d7d7; //this line should go in your stylesheet
}

 $('.showSelectEffect').on('click',function(){
      event.preventDefault();
      $(this).addClass('showSelectEffectColor');
    });​

Answer 2

为什么不使用:activecss 属性？

/* CSS */
a:active {
   background-color:#d7d7d7;
}

/* HTML */
<a href="test.html">test</a>

Answer 3

你也可以使用addClass函数

.changeBackground{
   background-color:#d7d7d7;
}



$(body).addClass('changeBackground');