Функция наведения Jquery и щелчок на планшете

У меня есть слайд-шоу 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>

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

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

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

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


ipad jquery hover tablet click-through
person jkilp    schedule 12.07.2012    source источник
comment
Так что и c_kick, и bergie3000 были правы. Но только один из вас может получить приз в виде зеленого чека!   -  person jkilp    schedule 13.07.2012

Ответы (2)


arrow_upward
6
arrow_downward

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

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

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

Сегодня была точно такая же проблема. Я решил это с помощью атрибута данных, привязанного к событию 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);
    }
});
person c_kick    schedule 12.07.2012
comment
c_kick, ты чертов гений! Спасибо! - person jkilp; 12.07.2012
comment
Собственно, еще вопрос. Поэтому, когда я нажимаю на него в первый раз, он выделяется, но не щелкает, но когда я нажимаю родного ли, а затем снова нажимаю на него, он щелкает. Есть ли способ сбросить состояние «clicked_once», если вы отключите его? - person jkilp; 12.07.2012

arrow_upward
2
arrow_downward

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

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

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

person bergie3000    schedule 12.07.2012
comment
Милая! Это почти сработало! В итоге я заменил .removeClass на .removeData, и, похоже, это работает отлично! Спасибо за вашу помощь! - person jkilp; 13.07.2012