Question

我正在使用带有HTML内容幻灯片的jQuery Cycle2。一切正常，除了我想用jQuery click（）事件绑定幻灯片中的元素。在桌面PC上，事件将触发但不会触摸设备！

            <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
            });

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

Answer 1

问题是触摸事件不会触发jquery中的点击事件。您需要将触摸事件捕获为Tap并让Tap触发单击事件。以下代码允许您注册点击事件并将其绑定到您现有的触摸事件。以下函数定义了当用户触摸元素的时间长于x且短于y时间时的点击 - 在这种情况下为50ms和300.

使用：给你想要制作的任何元素“可触摸”一类“可触摸”，任何从body标签冒出的触摸事件都会触发你已经为该元素注册的click事件。因此，在您的情况下，您可以添加可触摸到“更多”元素的类列表。

    $("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
    });

触摸设备上的jQuery Cycle2问题（点击事件不会触发）

1 个答案: