클릭 할 때 배경 이미지 바꾸기

Question

나는 마우스를 가져 가면 작동하는 애니메이션을 만들지 만, 모바일상의 이유로 사용자가 클릭하거나 터치 할 때 애니메이션이 재생되기를 원합니다.

여기에 마우스를 올리면 내 js 코드가 나타나지만 onclick 작업을 수행하는 방법을 모르겠습니다.

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

더 잘 설명하려면 JSFiddle입니다.

Answer 1

당신의 모든 이벤트를 바인딩하려면 다음을 사용 :

이

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

참조 : http://api.jquery.com/on/

Answer 2

$.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 3

가 클릭 작업을 만든이

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