如何模拟手机浏览器的触摸事件？安卓、iPhone？

发布于 2024-12-28 14:52:31 字数 134 浏览 0 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

昵称有卵用 2025-01-04 14:52:31

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

我写了一篇关于 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 将控制它的外观。希望这有帮助！ :)

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.

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):

// 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:

.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! :)

回复收藏 0 原文

~没有更多了~