jQtouch点击和链接问题

Question

我在使用点击链接时遇到了 jQtouch 问题，

我试图在点击 iphone 应用商店（蓝色）时获取一个更改背景颜色的链接，

所以我使用以下代码：

<script>
    var jQT = new $.jQTouch({
        statusBar: 'black',
        useFastTouch: true
    });
    $(function(){
        $("a").live('tap', function() {
            $(this).addClass("active");
        },function() {
            $(this).removeClass("active");
        });
    });
</script>

“.active”样式包含蓝色背景：

.active {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#048bf4), to(#015de6));
}

链接是这样的：

<a id="a" href="http://google.com"><img src="someimage.png"><div>Google</div></a>

问题是，当我点击链接时，背景会按预期更改，但链接不起作用，并且当我移开手指时新背景不会被删除^^

有人可以吗指出我做错了什么：/？

Answer 1

如果单击或点击锚点，“活动”类应该自动添加到锚点，因此您不需要自己添加和删除“活动”类。

您应该将正常的背景图像分配给锚元素，并将活动背景图像分配给 a:active:

a {
  background-image: ...
}

a:active {
  background-image: ...
}

希望这能解决您的问题。

Answer 2

谢谢威廉，
我删除了 jQtouch 并仅使用 jQuery 添加了点击事物的代码，

$(document).ready(function() {
    var delay = 100;
    var hovertime = null;
    var hoverdelay = null;
    $("#list a").bind('touchstart mouseover', function(){
        clearTimeout(hoverdelay);
        hovertime = new Date().getTime();
        var $el = $(this).add("*", this);
        hoverdelay = setTimeout(function(){
            $el.addClass("active");
        }, delay);
    });
    $("#list a").bind('touchend mouseup', function() {
        clearTimeout(hoverdelay);
        var now = new Date().getTime();
        var $el = $(this).add("*", this);
        if(now < hovertime + delay) {
            $el.addClass("active");
            setTimeout(function(){
                $el.removeClass("active");
            }, delay);
        } else {
            $el.removeClass("active");
        }
    });
    $("#list a").bind('touchmove touchcancel mouseout', function() {
        clearTimeout(hoverdelay);
        var $el = $(this).add("*", this);
        $el.removeClass("active");
    });
});

我在这里放置了一个示例： http://fun.r4dius.net/temp/iphone.html

它的工作原理基本上是这样的：

• 当点击它时，它只会在 100 毫秒超时后切换到“活动”，所以如果你只是想要滑动页面，它不会在每次点击时激活，
• 也设置为“活动”
• 当切换到“活动”时，元素的所有子元素（*）在结束点击时
  • 如果它是“active”，则删除“active”类，
  • 如果是快速点击（当“touchend”发生在“active”设置之前），我们仍然会切换到“active”并在 100 毫秒延迟后将其删除，只是为了显示它已被录制
• ，如果我们在录制时移动，“活动”类将被删除

这是我面临的最后一个问题：/

出于某种原因，如果我点击，那么我会在该元素完全相同的时间开始移动设置为活动状态（100毫秒延迟后），它保持活动状态直到发生“touchend”，而不是按应有的方式删除活动类，有人明白为什么吗？

我在jQtouch预览页面上测试了这个，但无法重现它，
但如果我在我的页面上使用 jQtouch ，问题也会发生：/