0

我正在使用带有 HTML 内容幻灯片的 jQuery Cycle2。除了我想用 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 -link：

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

但这对触摸设备没有影响！

4

1 回答 1

0

问题是触摸事件不会触发 jquery 中的点击事件。您需要将触摸事件捕获为 Tap 并让 Tap 触发点击事件。以下代码允许您注册一个点击事件并将其绑定到您已经存在的触摸事件。以下函数将点击定义为用户触摸元素的时间长于 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
    });
于 2017-02-13T21:36:29.587 回答