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

Question

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

Answer 1

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

我写了一个 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 将控制它的外观。希望这可以帮助! :)