1

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

我正在尝试获取一个链接以在点击 la iphone appstore 时更改背景颜色（蓝色）

所以我正在使用这段代码：

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

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

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

4

2 回答 2

0

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

您应该将普通背景图像分配给锚元素，并将活动背景图像分配给 a:active：

a {
  background-image: ...
}

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

希望这能解决你的问题。

于 2010-08-09T10:42:51.330 回答
0

谢谢威廉，我删除了 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 毫秒超时后切换到“活动”，这样如果你只想滑动页面，它不会在每次点击时激活，
  • 切换到“活动”时，元素的所有子元素（*）也设置为“活动”
  • 结束水龙头时
    • 如果它是“活动的”，则删除“活动”类，
    • 如果它是一个快速点击（当“touchend”发生在“active”设置之前）我们仍然切换到“active”并在 100ms 延迟后将其删除，只是为了表明它已被录制
  • 如果我们在录音时移动，“活动”类将被删除

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

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

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

于 2010-08-18T11:06:07.153 回答