Jquery iPad Hover / Click

Question

我正在尝试在ipad上构建一个div，只需点击一下即可展开，然后在下一次点击时实际打开以填充浏览器窗口，我不知道如何做到这一点，这是我的代码：

var elems = $( ".event" );

    elems.bind("click touchstart", function(){

    if ( $(this).hasClass( "hovered" ) ) {

        $(this).removeClass("hovered");
        $(this).addClass("open");
        elems.not(this).addClass('closed');
        $(this).find('.close-btn').fadeIn();

    } else {

        $(this).removeClass("hovered not-hovered");
        $(this).addClass("hovered");
        elems.not(this).addClass('not-hovered');

    };

});

所以基本上在第一次单击时，div（.event）会稍微扩展一下，接受类“hovered”，如果div上存在类并且你单击它应该展开以填充屏幕（接受类） “开放”）......它似乎在我的broswer工作但不在ipad，任何想法吗？

继承我的开发链接只是因为：nyeto.com - 在你的iPad上查看

Answer 1

iOS click后不久就会触发touchstart+touchend个事件，因此您的代码可能会连续两次触发。

尝试取消这两个事件：

elems.bind("click touchstart", function(e){
    e.preventDefault();
    // rest of your code

---

另一种方法是在click上触发touchstart事件并取消后者：

elems.bind("touchstart", function(e){
    e.preventDefault();
    $(this).trigger('click');
});
elems.bind("click", function(e) {
    // rest of your code