jQtouch крана и связь проблема

Question

У меня возникли проблемы с jQtouch при использовании крана на связи,

Я пытаюсь получить ссылку, чтобы изменить цвет фона при постукивании а-ля 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> 

Проблема, когда я нажимаю на ссылку, фоновые изменения, как ожидается, но ссылка не работает, и новый фон не удаляется при удалении пальца ^^

Может ли кто-нибудь указать, что я делаю неправильно: /?

Answer 1

«Активный» класс должен автоматически добавляться к якорю, если он щелкнут или нажат, поэтому вам не нужно добавлять и удалять «активный» класс самостоятельно.

Вы должны иметь нормальное фоновое изображение, назначенное для закрепления элементов и активное фонового изображения: активное:

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 мс, так что если вы просто хотите пронести страницу, он не будет активироваться при каждом нажатии,
• при переключении на «активные», все Чайлдс (*) элемента установлены на «активный» слишком
• когда заканчивается кран
  • , если это «активный», «активный» класс удален,
  • , если это быстрый кран (когда «touchend» происходит перед «активным» был установлен), мы по-прежнему перейти к «активным» и удалить его после 100мс задержки, просто чтобы показать, что это было записано
• если мы перемещаемся при записи на пленку, класс «активный» удаляется

Вот последняя проблема, я столкнулся:/

По какой-то причине, если я нажимаю, то я начинаю двигаться в то же самое время, что элемент установлен в активное состояние (после 100мс задержки), его остается активным до тех пор, пока не произойдет «прикосновение», вместо того, чтобы удалить активный класс, как следует, кто-то понимает, почему?

Я испытал это на странице просмотра jQtouch и не смог воспроизвести его, , но если я использую jQtouch на моей странице проблема возникает то же:/