如何为移动浏览器模拟触摸事件?安卓、iPhone

Question

我正在创建一个web应用程序。我在移动浏览器上测试它，注意到：主动伪类dsnt确实有效。我应该如何模拟移动浏览器的点击？我正在使用css精灵。我偶然发现了触摸启动，但不知道如何使用它。有人能帮我吗？提前谢谢。

Answer 1

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

我在PHPAlchemist.com上写了一篇文章，详细介绍了为移动设备创建带有触摸事件集成的自定义滚动条的必要步骤，但这可能有点深远。从本质上讲，您可能想要做这样的事情（jQueryJavascript代码）：

// 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将控制它的外观。希望这能有所帮助！：）