Phonegap 应用程序的 iOS/Android 设备中按钮 css 的更改速度非常慢

Question

我使用 jquery mobile 和 css 为我的 Phonegap 移动应用程序设计了一个自定义按钮。 单击按钮只会切换开/关状态，并且 css 类也会更改。 然而，iPhone/iPad/Android 设备上的切换/更改速度太慢。 按钮渲染切换的 CSS 时存在一些延迟。 它在桌面浏览器上实际上相当快。

我在代码中所做的就是：

$("input[id='someid']").closest('div').removeClass("buttonUp ").addClass("buttonDown");
$("input[id='someid']").closest('div').removeClass("buttonDown").addClass("buttonUp");

CSS：

            .buttonDown {
                border:1px solid #000;font-weight:bold; cursor:pointer; text-shadow:0 1px 1px #000; text-decoration:none; background:#8FFFDD;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#8FFFDD), color-stop(100%,#72ccb1));background-image:-moz-linear-gradient(top, #72ccb1 0%, #8FFFDD 100%);background-image:-webkit-linear-gradient(top, #8FFFDD 0%,#72ccb1 100%);background-image:-o-linear-gradient(top, #8FFFDD 0%,#72ccb1 100%);background-image:-ms-linear-gradient(top, #8FFFDD 0%,#72ccb1 100%);background-image:linear-gradient(to bottom, #8FFFDD 0%,#72ccb1 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#8FFFDD', endColorstr='#72ccb1',GradientType=0 );color:#3D6AFF;
            }   


            .buttonUp {
                border:1px solid #000;font-weight:bold; cursor:pointer; text-shadow:0 1px 1px #000; text-decoration:none;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#DD3B1B), color-stop(100%,#b12f16));background-image:-moz-linear-gradient(top, #b12f16 0%, #DD3B1B 100%);background-image:-webkit-linear-gradient(top, #DD3B1B 0%,#b12f16 100%);background-image:-o-linear-gradient(top, #DD3B1B 0%,#b12f16 100%);background-image:-ms-linear-gradient(top, #DD3B1B 0%,#b12f16 100%);background-image:linear-gradient(to bottom, #DD3B1B 0%,#b12f16 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#DD3B1B', endColorstr='#b12f16',GradientType=0 );color:#000000;
            }

我尝试了'toggleClass()'但没有成功，对性能没有影响。

如何进一步优化？

感谢您的帮助。

Answer 1

这个延迟是故意设置的。应该在300ms左右。

无论人们怎么想，混合应用程序比原生应用程序有很多缺点。在这种情况下，问题是点击事件检测与滑动事件。如果这两个操作都是即时的，应用程序将无法识别什么是单击事件以及什么是开始滑动启动事件。因为滑动操作需要优先于单击事件，并且只有在屏幕上同一位置上的触摸持续至少 300 毫秒时才会触发单击事件。

如果将 click 事件替换为 vclick 或 touchstart 事件即可修复。此活动不会遇到延迟问题。

如果您想了解更多相关信息，请查看我的其他关于 click/vclick/tap 事件之间差异的答案。可以在这里找到：在 jQuery Mobile 中，tap 和 vclick 之间有什么区别？

另一方面，如果您想保留所有内容，您也可以使用名为 Fastclick 的第 3 方 jQuery Mobile 插件来修复此问题。它的作用是创建快速响应的按钮，而不会出现幽灵点击和烦人的

300ms

延迟。尝试一下，你可能会喜欢。