如何模拟移动浏览器的触摸事件?Android、iPhone ?

I am creating a web app. I was testing it on a mobile browser and noticed that :active pseudo class dsnt really work. How should I simulate clicks for mobile browser? I am using css sprites. I stumbled upon ontouchstart but dont know how to use that. can anyone help me over it? Thanks in advance.

我正在创建一个web应用程序。我在移动浏览器上测试它，发现:active pseudo类dsnt确实可以工作。如何模拟移动浏览器的点击?我正在使用css精灵。我偶然发现了ontouchstart，但不知道如何使用它。谁能帮我一下吗?提前谢谢。

1 个解决方案

#1

Quite right, the ontouchstart will help you achieve something, from changing CSS to being able to drag elements on touch devices supporting the touch events. And you're using jQuery, which will allow you to bind those events to your elements.

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

I wrote an article on PHPAlchemist.com detailing the necessary steps to creating a custom scrollbar with touch event integration for mobile devices, but that might be a bit far-reaching. Essentially, you would want to do something like this (jQuery Javascript code):

我在phpalchemst.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");
});

...then, in your CSS, you could have something like this for example:

…然后，在你的CSS中，你可以有这样的东西例如:

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

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

In a nutshell, you're adding a class to your button on touch start, and removing it when the touch ends, and the CSS will control what it looks like. Hope this helps! :)

简单地说，您是在按钮上添加一个类，并在触摸结束时删除它，而CSS将控制它的外观。希望这可以帮助!:)

#1

// 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");
});