Question

I am developing a mobile page with jquery mobile and HTML5.

I want to change the div color(initially color is in black), when i am pressing(tapping or clicking) that div, i want to change that div’s color to white from black and after i removed my tapping i.e. after i took out my finger from that div i want to restore to black as before.

Is any event there for this kind?.Please help me in this.Thanks in advance.

<!--START:Initial state of  Div Where i want to change color to white when i press that div and change back to normal after i remove my finger-->
<div class="colorBlack inactive"><div>
<!--END:Initial state of Div Where i want to change color to white when i press that div and change back to normal after i remove my hand-->

<!--START: Div class is changed to colorWhite,when i am tapping that div or i am holding that div with my finger-->
<div class="colorWhite active"><div>
<!--END: Div class is changed to colorWhite,when i am tapping that div or i am holding that div with my finger-->


<!--START: Div class is changed back to colorBlack,when i remove my finger -->
<div class="colorBlack active"><div>
<!--START: Div class is changed back to colorBlack,when i remove my finger -->

Answer 1

You can use touch start and touch end events for this.

$('#test').bind('touchstart', function() {
    $(this).css('background-color', 'black');
});

$('#test').bind('touchend', function() {
    $(this).css('background-color', 'white');
});​

Here is working DEMO

You can find more information about native DOM events on MDN webstite.