如何模拟移动浏览器的触摸事件？安卓，iPhone？

Question

我正在创建一个网络应用程序。我在移动浏览器上对其进行了测试，发现 :active 伪类 dsnt 确实有效。我应该如何模拟移动浏览器的点击？我正在使用css精灵。我偶然发现了 ontouchstart 但不知道如何使用它。谁能帮我解决这个问题？提前致谢。

Answer 1

非常正确，ontouchstart 将帮助您实现一些目标，从更改 CSS 到能够在支持触摸事件的触摸设备上拖动元素。而且您正在使用 jQuery，它允许您将这些事件绑定到您的元素。

我写了一个article on PHPAlchemist.com 详细说明了为移动设备创建带有触摸事件集成的自定义滚动条的必要步骤，但这可能有点深远。本质上，你会想做这样的事情（jQuery Javascript 代码）：

// get your button...
var my_button = $(".my_button_class");

// first, bind the touch start event to your button to activate some new style...
my_button.bind("touchstart", function() {
    $(this).addClass("button_active");
});

// next, bind the touch end event to the button to deactivate the added style...
my_button.bind("touchend", function() {
    $(this).removeClass("button_active");
});

...那么，在你的 CSS 中，你可以有这样的例子：

.my_button_class
{
    background-image: url(image.png);
    background-position: 0px 0px;
}

.button_active
{
    background-position: 0px -20px;
}

简而言之，您在触摸开始时向按钮添加一个类，并在触摸结束时将其删除，CSS 将控制它的外观。希望这可以帮助！ :)