Jquery наведите курсор мыши и нажмите на планшет

Question

У меня есть слайд-шоу JQuery, который использует список навигации для переключения изображений слайд-шоу. Как это работает, когда вы наводите курсор на навигационный список, он подсвечивается (".active") и соответствующее изображение переключается на него. В навигационном списке есть ссылки, по которым также можно перейти, чтобы перейти на другую страницу.

Мне нужно, чтобы это работало на планшете, чтобы, когда человек нажимает на список навигации, он становится активным, затем слайд-шоу изображений переключается, а затем, если вы снова нажмете, оно перейдет по этой ссылке. Прямо сейчас происходит то, что как только вы нажимаете на него, он становится активным и щелкает.

Вот jquery

$(".main_image .desc").show(); //Show Banner
$(".main_image .block").animate({ opacity: 0.8 }, 1 ); //Set Opacity

//Click and Hover events for thumbnail list
$(".image_thumb ul li:first").addClass('active'); 
$(".image_thumb ul li").hover(function(e){ 
    //Set Variables
    e.preventDefault();

    var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
    var imgTitle = $(this).find('a.imgloc').attr("href"); //Get Main Image URL
    var imgDesc = $(this).find('.block').html();    //Get HTML of block
    var imgDescHeight = $(".main_image").find('.block').height();   //Calculate height of block 
    if ($(this).is(".active")) {  //If it's already active, then...
        return false; // Don't click through
    } else {
        //Animate the Teaser                
        $(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250, function() {
        $(".main_image .block").html(imgDesc).animate({ opacity: 0.8,   marginBottom: "0" }, 250 );
        $(".main_image img").attr({ src: imgTitle , alt: imgAlt});
        });
    }

    $(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists
        $(this).addClass('active');  //add class of 'active' on this list only
        return false;
    });

А вот HTML для списка навигации

<div class="image_thumb">
    <ul>
        <li id="one">

            <h2><a href="styleguide.html">Text Text Text</a></h2>
            <p><a href="styleguide.html">Text Text Text</a></p>

            <a class="imgloc" href="content/images/home/01.jpg"></a>

            <div class="block">
                 <p>Text Text Text</p>
            </div>

        </li>
    </ul>
</div>

Вот пример того, как это работает: http://ocgoodwill.org/

Если кто-то может помочь, это было бы здорово!

-- РЕДАКТИРОВАТЬ --

Я также хочу добавить, что если пользователь нажал на один из элементов, а затем на другой, то нужно сбросить первый, чтобы при повторном нажатии на него он автоматически не нажимал.

Answer 1

ОБНОВЛЕНИЕ: после недавнего использования этого сценария я понял, что все можно сделать намного проще, не требуя никаких флагов.

Смотрите пересмотренный код на моем сайте.

Оригинальный ответ:

Была та же самая проблема сегодня. Я решил это с помощью атрибута data, привязанного к событию touchstart (который является базовой проверкой сенсорного устройства, но вы можете сделать это более тщательно). Попробуйте использовать следующий код, заменив "clickable_element" в соответствии с вашими потребностями.

$('clickable_element').live("touchstart",function(e){
    if ($(this).data('clicked_once')) {
        // element has been tapped (hovered), reset 'clicked_once' data flag and return true
        $(this).data('clicked_once', false);
        return true;
    } else {
        // element has not been tapped (hovered) yet, set 'clicked_once' data flag to true
        e.preventDefault();
        $(this).trigger("mouseenter"); //optional: trigger the hover state, as preventDefault(); breaks this.
        $(this).data('clicked_once', true);
    }
});

Это должно помешать планшету активировать ссылку при первом нажатии, активировать ее при втором нажатии.

Редактировать: в случае нескольких элементов ссылки, которые необходимо "сбросить" при нажатии на один из других элементов, попробуйте присоединить атрибут данных к родительскому контейнеру:

HTML:

<div id="parent-element">
    <a href="" id="1">Link 1</a>
    <a href="" id="2">Link 2</a>
    <a href="" id="3">Link 3</a>
</div>

JQuery:

$('#parent-element a').live("touchstart",function(e){
    var $link_id = $(this).attr('id');
    if ($(this).parent().data('clicked') == $link_id) {
        // element has been tapped (hovered), reset 'clicked' data flag on parent element and return true (activates link)
        $(this).parent().data('clicked', null);
        return true;
    } else {
        // element has not been tapped (hovered) yet, set 'clicked' data flag on parent element to id of clicked link, and prevent click
        e.preventDefault(); // return false; on the end of this else statement would do the same
        $(this).trigger("mouseenter"); //optional: trigger the hover state, as preventDefault(); breaks this. I do suggest adding a class with addClass, as this is much more reliable.
        $(this).parent().data('clicked', $link_id);
    }
});

Answer 2

Я хотел бы ответить на исходное сообщение, но чтобы сбросить состояние clicked_once, вы должны использовать этот бит из исходного кода.

$(".image_thumb ul li").removeClass('clicked_once');

(или что-то вроде этого) в начале оператора else кода c_kick.