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

Answer 2

要绑定所有事件，请使用：

$('.phone').on("mouseover click touchstart touchend",function(){
    $('.phone').toggleClass('phone-two');    
});

参考：http://api.jquery.com/on/

Answer 3

试试这个

$('.phone').on('click', function (e) {  
    $('.phone').toggleClass('phone-two');  
});

点击即可交换背景图片

3 个答案: