Проблема jQuery Cycle2 на сенсорных устройствах (событие click не срабатывает)

Я использую jQuery Cycle2 со слайдами HTML-контента. Все работает нормально, за исключением элементов внутри слайдов, которые я хочу связать с событием jQuery click(). На настольных ПК событие сработает, но не на сенсорных устройствах!

            <div class="slider_wrapper cycle-slideshow" 
                data-cycle-fx="scrollHorz" 
                data-cycle-timeout="5000"
                data-pause-on-hover="true"
                data-cycle-swipe="true"
                data-cycle-prev="article section.slider .slider_wrapper .prev"
                data-cycle-next="article section.slider .slider_wrapper .next"
                data-cycle-slides="> div.slide">

                <div class="prev"></div>
                <div class="next"></div>
                <div class="cycle-pager"></div>

                <div class="slide">

                    <div class="image">
                        <div class="copyright"></div>
                    </div>

                    <div class="text">
                        <div class="wrapper">

                            <h2>Title</h2>

                            <p>Some text</p>

                            <p><a class="more">Read More &raquo;</a></p>

                        </div>
                    </div>
                </div>

            </div>

Итак, что я хочу сделать, это связать ссылку a.more:

            $(".more").click(function() {   
// do something
            });

Но это не влияет на сенсорные устройства!


events click touch jquery jquery-cycle2
person user3231192    schedule 24.01.2014    source источник
comment
для получения дополнительной информации: любая ссылка внутри Slider не работает на сенсорных устройствах!   -  person user3231192    schedule 24.01.2014
comment
попробуйте вставить рабочий пример в jsfiddle, так будет проще помочь.   -  person honk31    schedule 10.04.2014

Ответы (1)


arrow_upward
0
arrow_downward

Проблема в том, что события касания не вызывают события щелчка в jquery. Вам нужно будет зафиксировать событие касания как касание, и чтобы касание вызывало событие щелчка. Следующий код позволяет зарегистрировать событие касания и привязать его к уже существующим событиям касания. Следующая функция определяет касание, когда пользователь касается элемента дольше, чем x, и меньше, чем y, — в данном случае 50 мс и 300.

Применение: присвойте любому элементу, который вы хотите сделать «осязаемым», класс «осязаемых», и любые события касания, всплывающие из тега body, вызовут событие щелчка, которое вы уже зарегистрировали для этого элемента. Итак, в вашем случае вы добавите touchable в список классов вашего элемента «больше».

    $("body").on("touchstart", ".touchable", function() { //make touchable  items fire like a click event if they bubble up from within body tag- can be any tag
    var d1 = new Date();
    var n1 = d1.getTime();
    setTimeout(function() {
    $(".touchable").on("touchend", function(event) {
        var d2 = new Date();
        var n2 = d2.getTime();
        if (n2 - n1 <= 300) {
        $(event.target).trigger("click"); //dont do the action here but instead call real/original click handler for this element
    }
    });
    }, 50)}).on("click", "#myelement", function() {
    //all the behavior i originally wanted -- this is optional -- you presumably already have click events bound to your elements
    });
person mahatrsna    schedule 13.02.2017