javascript - 单击时交换背景图像

Question

我创建了一个当我将鼠标悬停在它上面时可以运行的动画，但由于移动原因，我希望在用户单击或触摸它时播放该动画。

这是我的 js 代码，它使悬停起作用，但不确定如何使 onclick 起作用。

$(document).ready(function() {     
    $('.phone').hover(function(){     
        $('.phone').addClass('phone-two');    
    },     
    function(){    
        $('.phone').removeClass('phone-two');     
    });
}); 

这是一个JSFiddle更好地解释它。

Answer 1

与 $.on()您可以添加 'touchstart' 和 'touchend' 事件。

$(document).ready(function() {     
$('.phone').on({
    'mouseover touchstart': function(){     
         $('.phone').addClass('phone-two');    
     },     
     'mouseout touchend': function(){    
         $('.phone').removeClass('phone-two');     
    }});
});

请注意，这也会保留您的悬停事件。

这是一篇关于移动触摸事件的精彩文章:How to recognize touch events using jQuery in Safari for iPad? Is it possible?

DEMO