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

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

您应该为锚元素分配正常的背景图像，并为：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

它基本上是这样的：

点击它只会在100ms超时后切换到“活动”，这样如果你只是想刷一下它就不会在每次点击时激活，
切换到“有效”时，元素的所有子（*）也设置为“有效”
结束点击时
- 如果它“有效”，则删除“有效”类
- 如果它是一个快速点击（当“激活”发生在“激活”之前发生）我们仍然切换到“激活”并在100ms延迟后将其删除，只是为了表明它已被录音
如果我们在录制时移动，则会删除“有效”课程

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

出于某种原因，如果我点击，那么我在元素设置为活动的同一时间开始移动（在100ms延迟之后），它保持活动直到发生“touchend”，而不是删除活动类应该如此，有人理解为什么吗？

我在jQtouch预览页面上对此进行了测试，无法重现，但如果我在我的页面上使用jQtouch，问题就会出现同样的问题：/

jQtouch点击和链接问题

2 个答案: